网页素材网站免费,关于网站建设相关文章,网站建设功能文档,珠三角做网站1、WebSocket简介 WebSocket是一种网络通信协议#xff0c;可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455#xff0c;并由RFC7936进行补充规范。在WebSocket API中#xff0c;浏览器和服务器只需要完成一次握手#xff0c;两者之间就可以创建持久性…1、WebSocket简介 WebSocket是一种网络通信协议可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455并由RFC7936进行补充规范。在WebSocket API中浏览器和服务器只需要完成一次握手两者之间就可以创建持久性的连接并进行双向数据传输。这使得客户端和服务器之间的数据交换变得更加简单并允许服务端主动向客户端推送数据。
2、服务端环境搭建 服务端基于SpringBoot实现首先引入对应的jar包然后进行ServerEndpointExporter配置然后再定义了一个WebSocket操作类最后编写了一个测试的类WebSocketController一个普通的Controller类。
2.1、maven依赖
!-- websocket 依赖 --
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependency2.2、配置类WebSocketConfig ServerEndpointExporter是Spring框架中的一个类主要用于在Spring Boot应用中启动和管理WebSocket服务器端点。 在Spring Boot内置容器嵌入式容器中运行时必须由ServerEndpointExporter提供ServerEndpointExporter bean它会在启动时自动扫描和注册应用中的WebSocket端点。 注意在Tomcat等其他容器中运行时容器的扫描工作会由容器自己处理不需要手动注入ServerEndpointExporter bean即不需要该配置
Configuration
public class WebSocketConfig {/*** 注入ServerEndpointExporter* 这个bean会自动注册使用了ServerEndpoint注解声明的Websocket endpoint*/Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}2.3、WebSocket操作类 WebSocket操作类定义了WebSocket中的onOpen()、onMessage()、onClose()、onError()等方法同时提供了一个发送广播全部订阅用户和点对点信息的方法。 1、这里ServerEndpoint(“/api/websocket/{userId}”)中的定义可以根据自己的需要进行修改因为我的项目里使用了SpringSecurity了为了避免登录鉴权这里使用“/api/**”配置了免登陆Api。后续会继续完善需要登录鉴权的使用方式。 2、这里的WebSocket操作类每次建立 WebSocket 连接时就会初始化一个新的 bean。这是由于 WebSocket 是一种双向的、长时间的通信机制它需要维护每个连接的状态处理每个从客户端发来的消息并根据这些消息生成响应消息发送回客户端。因此为每个 WebSocket 连接创建一个单独的 bean 是必要的这样可以让 Spring Boot 为每个连接提供必要的管理和生命周期控制。这种方式也可以使用单例模式实现后续再更新相关用法。 Component
Slf4j
ServerEndpoint(/api/websocket/{userId})
public class WebSocket {//与某个客户端的连接会话需要通过它来给客户端发送数据private Session session;//用户IDprivate String userId;//concurrent包的线程安全Set用来存放每个客户端对应的MyWebSocket对象。//虽然Component默认是单例模式的但springboot还是会为每个websocket连接初始化一个bean所以可以用一个静态set保存起来。private static CopyOnWriteArraySetWebSocket webSockets new CopyOnWriteArraySet();// 用来存在线连接用户信息private static ConcurrentHashMapString,Session sessionPool new ConcurrentHashMapString,Session();/*** 链接成功调用的方法*/OnOpenpublic void onOpen(Session session, PathParam(valueuserId)String userId) {try {this.session session;this.userId userId;webSockets.add(this);sessionPool.put(userId, session);log.info(WebSocket消息有新的连接总数为:webSockets.size());} catch (Exception e) {log.error(WebSocket异常-链接失败(onOpen)原因 e.getMessage());}}/*** 链接关闭调用的方法*/OnClosepublic void onClose() {try {webSockets.remove(this);sessionPool.remove(this.userId);log.info(WebSocket消息连接断开总数为:webSockets.size());} catch (Exception e) {log.error(WebSocket异常-链接关闭失败(onClose)原因 e.getMessage());}}/*** 收到客户端消息后调用的方法** param message*/OnMessagepublic void onMessage(String message) {log.info(WebSocket消息收到客户端消息:message);}/** 发送错误时的处理* param session* param error*/OnErrorpublic void onError(Session session, Throwable error) {log.error(用户错误,原因:error.getMessage());log.error(WebSocket异常-错误信息(onError)原因 error.getMessage());}// 此为广播消息public void sendAllMessage(String message) {log.info(WebSocket消息-广播消息:message);for(WebSocket webSocket : webSockets) {try {if(webSocket.session.isOpen()) {webSocket.session.getAsyncRemote().sendText(message);}} catch (Exception e) {log.error(WebSocket异常-广播消息异常(sendAllMessage)原因 e.getMessage());}}}// 此为单点消息public void sendOneMessage(String userId, String message) {Session session sessionPool.get(userId);if (session ! null session.isOpen()) {try {log.info(WebSocket消息-点对点消息:message);session.getAsyncRemote().sendText(message);} catch (Exception e) {log.error(WebSocket异常-点对点消息异常(sendOneMessage)原因 e.getMessage());}}}}2.4、测试类WebSocketController 这个测试类主要是为了测试发送信息后页面可以自动更新。至此服务端的配置就完成了。
Controller
RequestMapping(/api/msg)
public class WebSocketController {Resourceprivate WebSocket webSocket;RequestMapping(/all/{msg}) // 将消息发送到/topic/greetings路径下public void all(PathVariable String msg) {//创建业务消息信息JSONObject obj new JSONObject();obj.put(msg, msg);//消息内容//全体发送webSocket.sendAllMessage(obj.toJSONString());}RequestMapping(/{userId}/{msg}) // 将消息发送到/topic/greetings路径下public void sendUser(PathVariable String userId,PathVariable String msg) {//创建业务消息信息JSONObject obj new JSONObject();obj.put(msg, msg);//消息内容webSocket.sendOneMessage(userId, obj.toJSONString());}}3、前端环境搭建 前端是基于Vue实现具体代码如下
templatediv classorder-listspanTestMsg:{{ message }}/span/div
/template
script
export default {name: HomeView,data() {return {message:}},components: {},created() {},mounted() {//初始化websocketthis.initWebSocket()},destroyed: function () { // 离开页面生命周期函数this.websocketclose();},computed: {},methods: {initWebSocket: function () { // 建立连接var userId test//this.COMMON.getStorage(user);//对应ServerEndpoint(/api/websocket/{userId})中的地址var url ws://ip:port/项目名/api/websocket/ userId;this.websock new WebSocket(url);this.websock.onopen this.websocketonopen;this.websock.send this.websocketsend;this.websock.onerror this.websocketonerror;this.websock.onmessage this.websocketonmessage;this.websock.onclose this.websocketclose;},// 连接成功后调用websocketonopen: function () {console.log(WebSocket连接成功);},// 发生错误时调用websocketonerror: function (e) {console.log(WebSocket连接发生错误 JSON.stringify(e));},// 给后端发消息时调用websocketsend: function (e) {console.log(WebSocket连接发生错误 JSON.stringify(e));},
// 接收后端消息// vue 客户端根据返回的cmd类型处理不同的业务响应websocketonmessage: function (e) {this.message data;},// 关闭连接时调用websocketclose: function (e) {console.log(connection closed ( e.code ));}},}
/script
style langscss/style4、测试 至此我们就完成了WebSocket的服务端和前端的环境搭建首先启动后台服务然后启动前端服务进入上述页面这个时候就会建立起来链接然后访问“http://localhost:8803/qriver-lab/api/msg/test/6666”其中test对应的是userId6666是msg信息这个时候就会发现页面会自动显示6666不需要进行刷新。
