JSR356标准Java WebSocket实现多人 or 单人聊天室demo

时间 2019-11-24

标签 jsr356 jsr 标准 java websocket 实现多人单人聊天室 demo 栏目 Java 繁體版

原文原文链接

哇，好长时间没有写博客了，最近公司在改善前端技术然咱们学什么react+antd+dva 这种东西看的我头昏脑涨，还没几天就让我作技术调研弄弄websocket实现点对点聊天，因而乎就开始茫茫的百度生涯。javascript

正片：首先感谢redstarofsleep这位老哥和他的博客给个人启发他的博客地址http://redstarofsleep.iteye.com/blog/1974620html

别的不说了直接上代码了前端

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Iterator;
import java.util.concurrent.ConcurrentHashMap;
import java.util.logging.Logger;

/**
 * @author xuyuhao
 * @version 1.0
 * @since 2018/3/21
 */

@ServerEndpoint(value = "/websocket/{user}")
public class MyServerEndpoint {

    private Session session;
    private static final Logger sysLogger = Logger.getLogger("sysLog");
    //定义一个集合 用于存储打开通道的用户
    private static ConcurrentHashMap map = new ConcurrentHashMap();

    @OnOpen
    public void open(Session session, @PathParam(value = "user") String user) {
        //判断用户是否重复
        if(!map.containsKey(user)){
            //塞入map中
            map.put(user,session);
        }
        sysLogger.info("*** WebSocket opened from sessionId " + session.getId());
    }

    @OnMessage
    public void inMessage(String message) throws Exception {
        //前端传过来的信息格式为 ‘发送人,接收人,信息’
        String[] list = message.split(",");
        message = list[0]+":"+list[2];
        //若是接收人为全体成员
        if("all".equals(list[1])){
            for (Object o : map.keySet()) {
                ((Session)map.get(o)).getBasicRemote().sendText(message);
            }
        }else{
            //获取发送人
            Session from = (Session)map.get(list[0]);
            //获取接收人
            Session to = (Session)map.get(list[1]);
            if(to!=null&&from!=null){
                //发送
                from.getBasicRemote().sendText(message);
                to.getBasicRemote().sendText(message);
            }else {
                from.getBasicRemote().sendText("对方已离线");
            }

        }
    }

    @OnClose
    public String end() throws Exception{
        return "*** WebSocket closed from sessionId " + this.session.getId();
    }


}

而后定义几个页面直接上代码了java

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Index</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <%session.setAttribute("user", "小明");%>
    <script type="text/javascript">
        var ws = null;
        function startWebSocket() {
            if ('WebSocket' in window)
                ws = new WebSocket("ws://localhost:8084/pt/websocket/小明");
            else if ('MozWebSocket' in window)
                ws = new MozWebSocket("ws://localhost:8084/pt/websocket/小明");
            else
                alert("not support");


            ws.onmessage = function(evt) {
                //alert(evt.data);
                console.log(evt);
                // $("#xiaoxi").val(evt.data);
                setMessageInnerHTML(evt.data);
            };
            function setMessageInnerHTML(innerHTML){
                document.getElementById('message').innerHTML += innerHTML + '<br/>';
            }
            ws.onclose = function(evt) {
                //alert("close");
                document.getElementById('denglu').innerHTML="离线";
            };

            ws.onopen = function(evt) {
                //alert("open");
                document.getElementById('denglu').innerHTML="在线";
                document.getElementById('userName').innerHTML='小明';
            };
        }

        function sendMsg() {
            var fromName = "小明";
            var toName = document.getElementById('name').value;  //发给谁
            var content = document.getElementById('writeMsg').value; //发送内容
            ws.send(fromName+","+toName+","+content);//注意格式
        }
    </script>
</head>
<body onload="startWebSocket();">
<p>聊天功能实现</p>
登陆状态：
<span id="denglu" style="color:red;">正在登陆</span>
<br>
登陆人：
<span id="userName"></span>
<br>
<br>
<br>

发送给谁：<select id="name">
    <option value="all">全部人</option>
    <option value="小玲">小玲</option>
    <option value="小摩纳">小摩纳</option>
</select>
<br>
发送内容：<input type="text" id="writeMsg"></input>
<br>
聊天框：<div id="message" style="height: 250px;width: 280px;border: 1px solid; overflow: auto;"></div>
<br>
<input type="button" value="send" onclick="sendMsg()"></input>
</body>
</html>

第二个界面react

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Index</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <%session.setAttribute("user", "小摩纳");%>
    <script type="text/javascript">
        var ws = null;

        function startWebSocket() {
            if ('WebSocket' in window)
                ws = new WebSocket("ws://localhost:8084/pt/websocket/小摩纳");
            else if ('MozWebSocket' in window)
                ws = new MozWebSocket("ws://localhost:8084/pt/websocket/小摩纳");
            else
                alert("not support");


            ws.onmessage = function (evt) {
                //alert(evt.data);
                console.log(evt);
                // $("#xiaoxi").val(evt.data);
                setMessageInnerHTML(evt.data);
            };

            function setMessageInnerHTML(innerHTML) {
                document.getElementById('message').innerHTML += innerHTML + '<br/>';
            }

            ws.onclose = function (evt) {
                //alert("close");
                document.getElementById('denglu').innerHTML = "离线";
            };

            ws.onopen = function (evt) {
                //alert("open");
                document.getElementById('denglu').innerHTML = "在线";
                document.getElementById('userName').innerHTML = '小摩纳';
            };
        }

        function sendMsg() {
            var fromName = "小摩纳";
            var toName = document.getElementById('name').value;  //发给谁
            var content = document.getElementById('writeMsg').value; //发送内容
            ws.send(fromName + "," + toName + "," + content);//注意格式
        }
    </script>
</head>
<body onload="startWebSocket();">
<p>聊天功能实现</p>
登陆状态：
<span id="denglu" style="color:red;">正在登陆</span>
<br>
登陆人：
<span id="userName"></span>
<br>
<br>
<br>

发送给谁：<select name="name" id="name">
            <option value="all">全部人</option>
            <option value="小玲">小玲</option>
            <option value="小明">小明</option>
        </select>
<br>
发送内容：<input type="text" id="writeMsg"></input>
<br>
聊天框：
<div id="message" style="height: 250px;width: 280px;border: 1px solid; overflow: auto;"></div>
<br>
<input type="button" value="send" onclick="sendMsg()"></input>
</body>
</html>

第三个界面jquery

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Index</title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <%session.setAttribute("user", "小玲");%>
    <script type="text/javascript">
        var ws = null;
        function startWebSocket() {
            if ('WebSocket' in window)
                ws = new WebSocket("ws://localhost:8084/pt/websocket/小玲");
            else if ('MozWebSocket' in window)
                ws = new MozWebSocket("ws://localhost:8084/pt/websocket/小玲");
            else
                alert("not support");


            ws.onmessage = function(evt) {
                //alert(evt.data);
                console.log(evt);
                // $("#xiaoxi").val(evt.data);
                setMessageInnerHTML(evt.data);
            };
            function setMessageInnerHTML(innerHTML){
                document.getElementById('message').innerHTML += innerHTML + '<br/>';
            }
            ws.onclose = function(evt) {
                //alert("close");
                document.getElementById('denglu').innerHTML="离线";
            };

            ws.onopen = function(evt) {
                //alert("open");
                document.getElementById('denglu').innerHTML="在线";
                document.getElementById('userName').innerHTML='小玲';
            };
        }

        function sendMsg() {
            var fromName = "小玲";
            var toName = document.getElementById('name').value;  //发给谁
            var content = document.getElementById('writeMsg').value; //发送内容
            ws.send(fromName+","+toName+","+content);//注意格式
        }
    </script>
</head>
<body onload="startWebSocket();">
<p>聊天功能实现</p>
登陆状态：
<span id="denglu" style="color:red;">正在登陆</span>
<br>
登陆人：
<span id="userName"></span>
<br>
<br>
<br>

发送给谁：<select id="name">
            <option value="all">全部人</option>
            <option value="小摩纳">小摩纳</option>
            <option value="小明">小明</option>
        </select>
<br>
发送内容：<input type="text" id="writeMsg"></input>
<br>
聊天框：<div id="message" style="height: 250px;width: 280px;border: 1px solid; overflow: auto;"></div>
<br>
<input type="button" value="send" onclick="sendMsg()"></input>
</body>
</html>

这个代码只是一个小demo，估计后期能改动的点很是多~web

好了开启你的聊天之旅吧 ~websocket