Spring + WebSocket（注解）实现用户一对一通信

首先项目需要导入相应的依赖

<dependency>
    <groupId>javax.websocket</groupId>
    <artifactId>javax.websocket-api</artifactId>
    <version>1.1</version>
</dependency>

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.76</version>
</dependency>

后端建立WebSocket类接受socket发送请求

@ServerEndpoint("/mySocket") // 此处的路径需要和前端新建WebSocket的路径一致
public class MySocket {

    private static Map<String, Session> socketMap;

    static {
        socketMap = new HashMap<>();
    }

    /**
     * 连接建立
     *
     * @param session 会话
     */
    @OnOpen
    public void onOpen(Session session) {
        socketMap.put("123", session); // 用以 <用户id, session对象> 的键值对的形式保存起来
    }

    /**
     * 监听接受消息
     *
     * @param message 消息内容
     * @param session 会话
     */
    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        JSONObject messageObj = JSON.parseObject(message); // 传过来的message都是JSON格式的字符串，需要进行解析。其中会包含消息发送者的id，以及发送消息的内容
        // 通过解析出来的消息发送者id从socketMap中获取对应的发送者socket，然后发送消息内容
        Session receiverSession = socketMap.get(messageObj.get("receiverId"));
        if (receiverSession != null) {
            receiverSession.getBasicRemote().sendText("后端发送过来一条消息");
        }
    }

    /**
     * 连接出错
     *
     * @param session   会话
     * @param throwable 异常
     */
    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println(throwable.getMessage());
    }

    /**
     * 连接关闭
     */
    @OnClose
    public void onClose() {
        socketMap.remove("123"); // 移除用户session
    }
}

前端页面（mySocket.html）同样需要创建WebSocket与后端通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MySocket</title>
</head>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/sockjs-client/1.1.1/sockjs.js"></script>
<body>
<button onclick="sendMessage()">点击发送消息</button>
</body>
</html>
<script>
    var websocket;
    if ('WebSocket' in window) { //判断浏览器是否支持WebSocket
        websocket = new WebSocket("ws://localhost:8080/test/mySocket"); // 此处路径为：项目正常访问路径，最后再加上后端映射路径/mySocket
    } else if ('MozWebSocket' in window) {
        websocket = new MozWebSocket("ws://localhost:8080/test/mySocket");
    } else {
        websocket = new SockJS("http://localhost:8080/test/mySocket");
    }

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("连接建立");
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("连接出错");
    };

    //接收到消息的回调方法
    websocket.onmessage = function (message) {
        console.log("收到消息");
        console.log(message);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        console.log("连接关闭");
    }

    // //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

    function sendMessage() {
        var message = {
            receiverId: "123",
            content: "发送一条消息"
        };
        websocket.send(JSON.stringify(message));
    }
</script>

最后启动项目，访问项目的中的mySocket.html页面，如下

在这里插入图片描述

点击按钮

在这里插入图片描述

Spring + WebSocket（注解） 实现用户一对一通信

首先项目需要导入相应的依赖

后端建立WebSocket类接受socket发送请求

前端页面（mySocket.html）同样需要创建WebSocket与后端通信

最后启动项目，访问项目的中的mySocket.html页面，如下

点击按钮

悦读

Spring + WebSocket（注解）实现用户一对一通信