使用WebSocket实现简单的在线聊天室

前言:我自已在网上找好了好多 WebSocket 制作 在线聊天室的案列,发现大佬们写得太高深了 我这种新手看不懂,所以就自已尝试写了一个在线简易聊天室 (我只用了js 可以用jq )

话不多说,直接上案列:

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> WebSocket </title>
    <style>
        .main{
            border: 1px solid red;
            width: 600px;
            height: 600px;
            margin: auto;
        }
        #center{
            width: 400px;
            height: 400px;
            float: left;
            overflow: auto;
            border: 1px solid blue;
        }
        #right{
            width: 196px;
            height: 400px;
            float: right;
            overflow: auto;
            border: 1px solid blue;
        }
        #userCss{
            border: 1px solid chartreuse;
            width: 192px;
            height: 130px;
            float: right;
            text-align: center;
        }
    </style>
</head>
<body>
    <!--<div>-->
        <!--<input type="button" id="btnConnection" value="连接" />-->
        <!--<input type="button" id="btnClose" value="关闭" />-->
        <!--<input type="button" id="btnSend" value="发送" />-->
    <!--</div>-->

    <div class="main">
        <h4 style="text-align: center">简 易 聊 天 室</h4>
        <div id="center"></div>
        <div id="right">
            <p style="text-align: center"> 用户状态<p>
        </div>
        <textarea id="txtC" style="width: 400px;height: 130px;"></textarea>
        <div id="userCss">
            用户名:<input id="user" type="text" style="width:79px"/>
            <br/>
            <br/>
            <button id="btn" style="width:100px;height:50px"> 发 送 </button>
            <br/>
            <p></p>
            <button id="close"> 关 闭 连 接</button>
        </div>
    </div>

    <script type="text/javascript">

        var socke;

        //监听用户框输入的用户名 (失去焦点事件)
        document.getElementById("user").onblur=function () {
            var user = document.getElementById("user").value;
            //当用户输入完用户名并且失去焦点时 自动实现 连接

            //ws+ 服务器地址+端口号 +后台url + 用户名
            socke = new WebSocket("ws://localhost:8080/ws/"+user);

            //用户输入完用户名离开输入框 输入框变成禁用
            document.getElementById("user").disabled=true;
            //连接
            socke.onopen=function (msg) {
                //document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已连接聊天室</p>";
                console.log("已连接成功!");
            }
            socke.onclose=function () {
                //document.getElementById("right").innerHTML+="<p>您的用户名:"+user+" 已退出聊天室</p>";
            }
            //接收后台信息
            socke.onmessage=function (msg) {

                //取出 标志用户 字段
                var userName =msg.data.substring(0,msg.data.indexOf("&"));
                if(userName=="userKet"){
                    //取出用户
                    var userAll = msg.data.substring(msg.data.indexOf("&")+1).split(",");
                    for(var i=0;i<userAll.length;i++)
                        document.getElementById("right").innerHTML+="<p>"+userAll[i]+",已连接聊天室</p>";
                }
                if(userName=="conter"){
                    var text = msg.data.substring(msg.data.indexOf("&")+1,msg.data.length);
                    document.getElementById("center").innerHTML+="<p>"+text+"</p>";
                }


            }

            socke.onerror=function () {
                alert("发生了未知错误,请联系管理员....");
            };
        };

        //发送内容事件
        document.getElementById("btn").onclick=function(){
            var user = document.getElementById("user").value;
            if(user==""||user==null){
                alert("用户名不能为空");
                return false;
            }
            if(document.getElementById("txtC").value==""){
                alert("请输入内容!!!!");
                return false;
            }
            //向后台发送用户输入的内容
             var text = document.getElementById("txtC").value;
            socke.send(text);
            document.getElementById("txtC").value="";
        };

        //关闭连接
        document.getElementById("close").onclick=function () {
            socke.close();
            document.getElementById("user").disabled=false;
        };

    </script>
</body>
</html>

后台:

  

package SocketTest;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.*;


@ServerEndpoint("/ws/{user}")
public class SocketDemo {
    //currentuser 记录现在的用户
    private String currentUser;

    //用集合保存相对应用户 session Id
    private static Map<String ,String> userName = new HashMap<String,String>();

    private static Set<Session> login = new HashSet<>();

    //连接执行的方法
    @OnOpen
    public void onOpen(@PathParam("user") String user, Session session){
        currentUser = user;


        //存放所有的连接的用户
        userName.put(session.getId(),user);
        //
        login.add(session);

        System.out.println("用户:"+user+" 对应的Id:"+ session.getId());
        try {
            //向前台响应信息
            String nameAll ="";
            String link="";
            for (String s:userName.keySet()) {
                nameAll +=link+userName.get(s);
                link=",";
            }
            for (Session s:login) {
                s.getBasicRemote().sendText("userKet&"+nameAll);
            }

        } catch (IOException e) {
            e.printStackTrace();
        }
        // return  "用户:"+user+" 对应的Id:"+ session.getId();
    }
    //收到信息执行的方法
    @OnMessage
    public void onMessage(String message,Session session ){
        //通过键读取值
        for (Session s:login) {
           if(s.isOpen()){
               try {
                   //将所有用户的输入内容发送到前端
                   s.getBasicRemote().sendText("conter&"+currentUser+"说:"+message);
               } catch (IOException e) {
                   e.printStackTrace();
               }
           }
        }
       // return "用户:"+currentUser+"说:"+message;
    }
    //连接关闭时执行
    @OnClose
    public void  onClose(Session session, CloseReason closeReason){
        System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason));
    }
    //错误时执行
    @OnError
    public void onError(Throwable t){
        t.printStackTrace();
    }

}

演示:

  

有些bug,尚未修复.....

  

posted @ 2018-08-09 10:22  追梦滴小蜗牛  阅读(1459)  评论(0编辑  收藏  举报