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) {// 拿到消息，更新UIlet 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*/@OnOpenpublic 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*/@OnClosepublic void onClose(Session session, @PathParam("username") String username) {SESSION_MAP.remove(username);log.info("连接关闭，移除[{}]的用户会话, 当前在线人数为={}", username, SESSION_MAP.size());}/*** 收到客户端消息后调用的方法* 后台收到客户端发送过来的消息* onMessage 是一个消息的中转站* 接收浏览器端 socket.send 发送过来的 json数据** @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, Session session, @PathParam("username") String username) {log.info("收到消息，来自[{}]的消息[{}]", username, message);JSONObject obj = JSONUtil.parseObj(message);// to表示发送给哪个用户，比如 adminString toUsername = obj.getStr("to");// 发送的消息文本  helloString 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*/@OnErrorpublic 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);}}
}