一、后端

1.在Springboot项目的pom.xml中添加依赖

org.springframework.bootspring-boot-starter-websocket


cn.hutoolhutool-all5.4.3

2.要想使用WebSocket配置config配置类

package com.websocket.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {/*** 注入ServerEndpointExporter bean对象，他会自动注册使用@ServerEndpoint* @return*/@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}

3.新建component问价夹，下方新建WebSocketServer核心代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJo3rH5s-1675864417091)(C:\Users\86155\Desktop\websocket实现聊天室\image-20230208193030259.png)]

package com.websocket.component;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.util.Map;
import java.util.concurrent.ConcurrentHashMap;/*** @author websocket服务*/
@ServerEndpoint(value = "/imserver/{username}")
@Component
public class WebSocketServer {private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);/*** 记录当前在线连接数*/public static final Map sessionMap = new ConcurrentHashMap<>();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("username") String username) {sessionMap.put(username, session);log.info("有新用户加入，username={}, 当前在线人数为：{}", username, sessionMap.size());JSONObject result = new JSONObject();JSONArray array = new JSONArray();result.set("users", array);for (Object key : sessionMap.keySet()) {JSONObject jsonObject = new JSONObject();jsonObject.set("username", key);// {"username", "zhang", "username": "admin"}array.add(jsonObject);}
//        {"users": [{"username": "zhang"},{ "username": "admin"}]}sendAllMessage(JSONUtil.toJsonStr(result));  // 后台发送消息给所有的客户端}/*** 连接关闭调用的方法*/@OnClosepublic void onClose(Session session, @PathParam("username") String username) {sessionMap.remove(username);log.info("有一连接关闭，移除username={}的用户session, 当前在线人数为：{}", username, sessionMap.size());}/*** 收到客户端消息后调用的方法* 后台收到客户端发送过来的消息* onMessage 是一个消息的中转站* 接受 浏览器端 socket.send 发送过来的 json数据* @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, Session session, @PathParam("username") String username) {log.info("服务端收到用户username={}的消息:{}", username, message);JSONObject obj = JSONUtil.parseObj(message);String toUsername = obj.getStr("to"); // to表示发送给哪个用户，比如 adminString text = obj.getStr("text"); // 发送的消息文本  hello// {"to": "admin", "text": "聊天文本"}Session toSession = sessionMap.get(toUsername); // 根据 to用户名来获取 session，再通过session发送消息文本if (toSession != null) {// 服务器端 再把消息组装一下，组装后的消息包含发送人和发送的文本内容// {"from": "zhang", "text": "hello"}JSONObject jsonObject = new JSONObject();jsonObject.set("from", username);  // from 是 zhangjsonObject.set("text", text);  // text 同上面的textthis.sendMessage(jsonObject.toString(), toSession);log.info("发送给用户username={}，消息：{}", toUsername, jsonObject.toString());} else {log.info("发送失败，未找到用户username={}的session", toUsername);}}@OnErrorpublic void onError(Session session, Throwable error) {log.error("发生错误");error.printStackTrace();}/*** 服务端发送消息给客户端*/private void sendMessage(String message, Session toSession) {try {log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);toSession.getBasicRemote().sendText(message);} catch (Exception e) {log.error("服务端发送消息给客户端失败", e);}}/*** 服务端发送消息给所有客户端*/private void sendAllMessage(String message) {try {for (Session session : sessionMap.values()) {log.info("服务端给客户端[{}]发送消息{}", session.getId(), message);session.getBasicRemote().sendText(message);}} catch (Exception e) {log.error("服务端发送消息给客户端失败", e);}}
}

4.如果有拦截就放开拦截

​ 我没有设置拦截，全部都是放开的

二、Websocket

1.Websocket 属性

2.WebSocket 事件

3.WebSocket 方法—一下是 WebSocket对象的相关方法，假定我们使用了以上代码创建Socket 对象

三、前端

Springboot + WebSocket 实现在线聊天

一、后端

1.在Springboot项目的pom.xml中添加依赖

org.springframework.bootspring-boot-starter-websocket


cn.hutoolhutool-all5.4.3

2.要想使用WebSocket配置config配置类

package com.websocket.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {/*** 注入ServerEndpointExporter bean对象，他会自动注册使用@ServerEndpoint* @return*/@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}
}

3.新建component问价夹，下方新建WebSocketServer核心代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YwLc4Gkq-1675864418232)(C:\Users\86155\Desktop\websocket实现聊天室\image-20230208193030259.png)]

package com.websocket.component;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.util.Map;
import java.util.concurrent.ConcurrentHashMap;/*** @author websocket服务*/
@ServerEndpoint(value = "/imserver/{username}")
@Component
public class WebSocketServer {private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);/*** 记录当前在线连接数*/public static final Map sessionMap = new ConcurrentHashMap<>();/*** 连接建立成功调用的方法*/@OnOpenpublic void onOpen(Session session, @PathParam("username") String username) {sessionMap.put(username, session);log.info("有新用户加入，username={}, 当前在线人数为：{}", username, sessionMap.size());JSONObject result = new JSONObject();JSONArray array = new JSONArray();result.set("users", array);for (Object key : sessionMap.keySet()) {JSONObject jsonObject = new JSONObject();jsonObject.set("username", key);// {"username", "zhang", "username": "admin"}array.add(jsonObject);}
//        {"users": [{"username": "zhang"},{ "username": "admin"}]}sendAllMessage(JSONUtil.toJsonStr(result));  // 后台发送消息给所有的客户端}/*** 连接关闭调用的方法*/@OnClosepublic void onClose(Session session, @PathParam("username") String username) {sessionMap.remove(username);log.info("有一连接关闭，移除username={}的用户session, 当前在线人数为：{}", username, sessionMap.size());}/*** 收到客户端消息后调用的方法* 后台收到客户端发送过来的消息* onMessage 是一个消息的中转站* 接受 浏览器端 socket.send 发送过来的 json数据* @param message 客户端发送过来的消息*/@OnMessagepublic void onMessage(String message, Session session, @PathParam("username") String username) {log.info("服务端收到用户username={}的消息:{}", username, message);JSONObject obj = JSONUtil.parseObj(message);String toUsername = obj.getStr("to"); // to表示发送给哪个用户，比如 adminString text = obj.getStr("text"); // 发送的消息文本  hello// {"to": "admin", "text": "聊天文本"}Session toSession = sessionMap.get(toUsername); // 根据 to用户名来获取 session，再通过session发送消息文本if (toSession != null) {// 服务器端 再把消息组装一下，组装后的消息包含发送人和发送的文本内容// {"from": "zhang", "text": "hello"}JSONObject jsonObject = new JSONObject();jsonObject.set("from", username);  // from 是 zhangjsonObject.set("text", text);  // text 同上面的textthis.sendMessage(jsonObject.toString(), toSession);log.info("发送给用户username={}，消息：{}", toUsername, jsonObject.toString());} else {log.info("发送失败，未找到用户username={}的session", toUsername);}}@OnErrorpublic void onError(Session session, Throwable error) {log.error("发生错误");error.printStackTrace();}/*** 服务端发送消息给客户端*/private void sendMessage(String message, Session toSession) {try {log.info("服务端给客户端[{}]发送消息{}", toSession.getId(), message);toSession.getBasicRemote().sendText(message);} catch (Exception e) {log.error("服务端发送消息给客户端失败", e);}}/*** 服务端发送消息给所有客户端*/private void sendAllMessage(String message) {try {for (Session session : sessionMap.values()) {log.info("服务端给客户端[{}]发送消息{}", session.getId(), message);session.getBasicRemote().sendText(message);}} catch (Exception e) {log.error("服务端发送消息给客户端失败", e);}}
}

4.如果有拦截就放开拦截

​ 我没有设置拦截，全部都是放开的

二、Websocket

1.Websocket 属性

2.WebSocket 事件

3.WebSocket 方法—一下是 WebSocket对象的相关方法，假定我们使用了以上代码创建Socket 对象

三、前端