最近有点小时间，上个项目正好用到了websocket实现广播消息来着，现在来整理一下之前的一些代码，分享给大家。
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
一、环境介绍
开发工具：IntelliJ IDEA
运行环境：SpringBoot2.x、ReconnectingWebSocket、JDK1.8+、Maven 3.6 +
ReconnectingWebSocket 是一个小型的 JavaScript 库，封装了 WebSocket API 提供了在连接断开时自动重连的机制。
只需要简单的将：
ws = new WebSocket('ws://....');替换成：ws = new ReconnectingWebSocket('ws://....');
WebSocket 属性ws.readyState：
3 - 表示连接已经关闭或者连接不能打开。 2 - 表示连接正在进行关闭。 1 - 表示连接已建立，可以进行通信。 0 - 表示连接尚未建立。 WebSocket事件： 事件事件处理程序描述openws.onopen连接建立时触发messagews.onmessage客户端接收服务端数据时触发errorws.onerror通信发生错误时触发closews.onclose连接关闭时触发WebSocket方法： 方法描述Socket.send()使用连接发送数据Socket.close()关闭连接
二、代码实现
(一)、创建SpringBoot项目
(二)、添加 pom 依赖
org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-websocket org.springframework.boot spring-boot-starter-web commons-lang commons-lang 2.5 com.alibaba fastjson 1.2.71(三)、编写前端模板index.html
SpringBoot-ws
发送人：
接收人：
开启连接 关闭连接 发送消息
document.getElementById('send_content').focus(); var websocket = null; //关闭websocket function closeWebsocket() { //3代表已经关闭 if (3 != websocket.readyState) { websocket.close(); } else { alert("websocket之前已经关闭"); } } // 开启websocket function openWebsocket() { username = $("#suer").val() if (username != "") { //当前浏览前是否支持websocket if ("WebSocket" in window) { websocket = new ReconnectingWebSocket("ws://localhost:8080/send/" + username); websocket.reconnectInterval = 3000 //每3s进行一次重连，默认是每秒 } else if ('MozWebSocket' in window) { websocket = new MozWebSocket("ws://localhost:8080/send/" + username); } else { //低版本 websocket = new SockJS("http://localhost:8080/sockjs/send/" + username); } } websocket.onopen = function (event) { setMessage("打开连接"); } websocket.onclose = function (event) { setMessage("关闭连接"); } websocket.onmessage = function (event) { // setMessage(event.data); setMessageTxt(event.data) } websocket.onerror = function (event) { setMessage("连接异常，正在重连中..."); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function () { closeWebsocket(); } } //将消息显示在网页上 function setMessage(message) { alert(message) } function setMessageTxt(message) { mObj = JSON.parse(message) var div = document.createElement('div') div.innerHTML = "
" + mObj['from_topic'] + "
" + "
" + mObj['content'] + "
" div.setAttribute("class", "from_info") document.getElementById('index').appendChild(div) } // 发送消息 function sendMessage() { //1代表正在连接 if (1 == websocket.readyState) { var message = document.getElementById('send_content').value; var div = document.createElement('div') div.innerHTML = "
Me
" + "
" + message + "
" div.setAttribute("class", "send_info") document.getElementById('index').appendChild(div) ruser = document.getElementById("ruser").value; message = "{'content':'" + message + "','to_topic':'" + ruser + "'}" websocket.send(message); } else { alert("websocket未连接"); } document.getElementById('send_content').value = ""; document.getElementById('send_content').focus(); }
(四)、服务端代码编写
1. 编写 SWCrontroller.java 类
package com.jhzhong.swchat.controller;import com.jhzhong.swchat.websocket.WebSocketServer;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;@Controllerpublic class SWController { @Autowired private WebSocketServer webSocketServer; /** * author: jhzhong95@gmail.com * date: 2020-06-24 12:35 AM * desc: 跳转index.html页面 * @return */ @RequestMapping("/") public String index() { return "index"; }}2. 编写WebSocketConfig.java 类，开启WebSocket支持。
package com.jhzhong.swchat.websocket;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.socket.server.standard.ServerEndpointExporter;/** * author: jhzhong95@gmail.com * date: 2020-06-24 12:28 AM * desc: 开启WebSocket支持 */@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); }}3. 编写核心代码类 WebSocketServer.java
package com.jhzhong.swchat.websocket;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import freemarker.log.Logger;import org.apache.commons.lang.StringUtils;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.concurrent.ConcurrentHashMap;/** * author: jhzhong95@gmail.com * date: 2020-06-24 12:40 AM * desc: WebSocket服务端 */@ServerEndpoint("/send/{topic}")@Componentpublic class WebSocketServer { static Logger logger = Logger.getLogger("WebSocketServer"); /** * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。 */ private static int onlineCount = 0; /** * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。 */ private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>(); /** * 与某个客户端的连接会话，需要通过它来给客户端发送数据 */ private Session session; /** * 接收频道topic */ private String topic = ""; /** * 连接建立成功调用的方法 */ @OnOpen public void onOpen(Session session, @PathParam("topic") String topic) { this.session = session; this.topic = topic; if (webSocketMap.containsKey(topic)) { webSocketMap.remove(topic); webSocketMap.put(topic, this); //加入set中 } else { webSocketMap.put(topic, this); //加入set中 addOnlineCount(); //在线数加1 } logger.info("用户连接:" + topic + ",当前在线人数为:" + getOnlineCount()); try { sendMessage("连接成功"); } catch (IOException e) { logger.error("用户:" + topic + ",网络异常!!!!!!"); } } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { if (webSocketMap.containsKey(topic)) { webSocketMap.remove(topic); //从set中删除 subOnlineCount(); } logger.info("用户退出:" + topic + ",当前在线人数为:" + getOnlineCount()); } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 */ @OnMessage public void onMessage(String message, Session session) { logger.info("用户:" + topic + ",信息:" + message); //可以群发消息 //消息保存到数据库、redis if (StringUtils.isNotBlank(message)) { try { //解析发送的报文 JSONObject jsonObject = JSON.parseObject(message); //追加发送人(防止串改) jsonObject.put("from_topic", this.topic); String to_topic = jsonObject.getString("to_topic"); //传送给对应toUserId用户的websocket if (StringUtils.isNotBlank(to_topic) && webSocketMap.containsKey(to_topic)) { webSocketMap.get(to_topic).sendMessage(jsonObject.toJSONString()); } else { logger.error("请求的to_topic:" + to_topic + "不在该服务器上"); //否则不在这个服务器上，发送到mysql或者redis } } catch (Exception e) { e.printStackTrace(); } } } /** * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { logger.error("用户错误:" + this.topic + ",原因:" + error.getMessage()); error.printStackTrace(); } /** * 实现服务器主动推送 */ public void sendMessage(String message) throws IOException { this.session.getBasicRemote().sendText(message); } /** * 发送自定义消息 */ public static void sendInfo(String message, @PathParam("topic") String topic) throws IOException { logger.info("发送消息到:" + topic + "，信息:" + message); if (StringUtils.isNotBlank(topic) && webSocketMap.containsKey(topic)) { webSocketMap.get(topic).sendMessage(message); } else { logger.error("用户" + topic + ",不在线！"); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocketServer.onlineCount++; } public static synchronized void subOnlineCount() { WebSocketServer.onlineCount--; }}三、运行截图
1. 首页截图
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
