SpringBoot+Vue+WebSocket编写简单在线聊天室

WebSocket 简单入门

websocket 应用场景：社交订阅、多玩家游戏、协同编程/编辑、点击数据流、股票基金报价、体育实况更新、多媒体聊天、基于位置的应用、在线教育等等。

参考：https://blog.csdn.net/resilient/article/details/85613446

online-chatroom 效果图

简单做一下：

前端

socket = new WebSocket('ws://localhost:9999/ws/demo')

// 建立连接的回调
socket.onopen = function () {
}
// 收到消息的回调
socket.onmessage = function (msg) {
  // 拿到消息，更新UI
  let data = JSON.parse(msg.data)
  // 处理消息
  // ...
}
// 发生错误的回调
socket.onerror = function () {
  alert('onerror, ws 发生了错误')
}
// 关闭的回调
socket.onclose = function () {
  console.log('连接已关闭')
}

后端

引入依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

使用 websocket 依赖提供的 @ServerEndpoint、 @OnOpen、@OnClose 、@OnMessage 等注解，结合 WebSocket 生命周期进行业务方法编写。与 socket 编程相似，无非是什么阶段干什么事。

import cn.hutool.json.JSONArray;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author websocket服务
 */
@ServerEndpoint(value = "/ws/{username}")
@Component
public class WebSocketServer {
    /**
     * 记录当前在线连接
     */
    public static final Map<String, Session> SESSION_MAP = new ConcurrentHashMap<>();
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);

    /**
     * 连接建立成功调用的方法
     *
     * @param session
     * @param username
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("username") String username) {
        if (username == null || "".equals(username) || SESSION_MAP.containsKey(username)) {
            log.info("重复加入，或用户名无效，当前用户已加入 {}", username);
            try {
                JSONObject jsonObject = new JSONObject();
                jsonObject.set("msg", "username不合法");
                sendMessage(jsonObject.toString(), session);
                session.close();
            } catch (IOException e) {
                log.error("关闭失败", e);
            }
            return;
        }
        SESSION_MAP.put(username, session);
        log.info("新增会话，用户[{}], 当前在线人数为：{}", username, SESSION_MAP.size());
        // 刷新用户列表：将当前所有用户信息发送给客户端
        JSONObject result = new JSONObject();
        JSONArray array = new JSONArray();
        for (Object key : SESSION_MAP.keySet()) {
            JSONObject jsonObject = new JSONObject();
            jsonObject.set("username", key);
            // {"username", "zhang", "username": "admin"}
            array.add(jsonObject);
        }
        result.set("users", array);
        // {"users": [{"username": "zhang"}, {"username": "admin"}]}
        sendMsg2All(JSONUtil.toJsonStr(result));
    }

    /**
     * 连接关闭调用的方法
     *
     * @param session
     * @param username
     */
    @OnClose
    public void onClose(Session session, @PathParam("username") String username) {
        SESSION_MAP.remove(username);
        log.info("连接关闭，移除[{}]的用户会话, 当前在线人数为={}", username, SESSION_MAP.size());
    }

    /**
     * 收到客户端消息后调用的方法
     * 后台收到客户端发送过来的消息
     * onMessage 是一个消息的中转站
     * 接收浏览器端 socket.send 发送过来的 json数据
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session, @PathParam("username") String username) {
        log.info("收到消息，来自[{}]的消息[{}]", username, message);
        JSONObject obj = JSONUtil.parseObj(message);
        // to表示发送给哪个用户，比如 admin
        String toUsername = obj.getStr("to");
        // 发送的消息文本  hello
        String text = obj.getStr("text");
        // {"to": "admin", "text": "聊天文本"}
        // 根据 to用户名来获取 session，再通过session发送消息文本
        Session toSession = SESSION_MAP.get(toUsername);
        if (toSession != null) {
            // 服务器端 再把消息组装一下，组装后的消息包含发送人和发送的文本内容
            // {"from": "zhang", "text": "hello"}
            JSONObject jsonObject = new JSONObject();
            jsonObject.set("from", username);
            jsonObject.set("text", text);
            this.sendMessage(jsonObject.toString(), toSession);
            log.info("发送消息成功：[{}]成功给[{}]发送消息[{}]", username, toUsername, jsonObject);
        } else {
            log.info("发送失败，未找到用户[{}]的会话", toUsername);
        }
    }

    /**
     * 发送错误时
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误, sessionId = {}", session.getId());
        error.printStackTrace();
    }

    /**
     * 服务端发送消息给客户端
     *
     * @param message
     * @param toSession
     */
    private void sendMessage(String message, Session toSession) {
        try {
            toSession.getBasicRemote().sendText(message);
            log.info("成功发送[{}]消息给客户端(sessionId={})", message, toSession.getId());
        } catch (Exception e) {
            log.error("发送消息失败", e);
        }
    }

    /**
     * 服务端发送消息给所有客户端
     *
     * @param message
     */
    private void sendMsg2All(String message) {
        try {
            for (Session session : SESSION_MAP.values()) {
                try {
                    session.getBasicRemote().sendText(message);
                    log.info("服务端成功发送消息[{}]给客户端[{}]", message, session.getId());
                } catch (Exception e) {
                    log.error("发送消息失败", e);
                }
            }
        } catch (Exception e) {
            log.error("发送消息失败", e);
        }
    }
}

源代码

完整代码：https://gitee.com/engureguo/websocket-demo

参考

https://blog.csdn.net/xqnode/article/details/124360506