浅谈WebSocket

PS：带有本身一点个人的明白
1.什么是websocket，为什么要去使用它

首先看一下[维基百科上对Websocket的界说](WebSocket - 维基百科，自由的百科全书 (wikipedia.org))，WebSocket是一种网络传输协议，可在单个TCP毗连上进行全双工通信，位于OSI模子应用层应用层。
通过这个界说，其实就已经能够看出websocket的紧张性了。我们一般对前后端进行交互采用http协议，但http是一种无状态的、无毗连的、单向的应用层协议。因此对于C/S架构，客户端只能向服务端发送请求之后服务端才能向客户端发送数据，服务端属于被动的一方，这使得在一些高实时性要求的业务中，http要反复毗连甚至不关闭，而且速度也有些慢了。
Websocket作为全双工通信的协议，中心的传输信道相称自由，不管是服务端还是客户端都能够自由发送消息，速度上便能够大大提升。
2.简单展示一下我使用Websocket的用例

前端js和后端springboot作为演示对象，这是我本身的监控操纵系统信息的一个小项目，我采用的是Websocket的原生注解。
以下是部门代码演示。
首先要创建一个后端的Websocket服务器端点

1. import org.springframework.context.annotation.Bean;
2. import org.springframework.context.annotation.Configuration;
3. import org.springframework.stereotype.Component;
4. import org.springframework.web.socket.server.standard.ServerEndpointExporter;
6. @Configuration
7. @Component
8. public class WebSocketConfig {
9.     @Bean
10.     public ServerEndpointExporter serverEndpointExporter() {
11.         return new ServerEndpointExporter();
12.     }
13. }

复制代码

然后是后端服务器的配置和相干业务的处理

1. import com.example.cypherserverside.service.collect.SysDataServer;
2. import jakarta.websocket.*;
3. import jakarta.websocket.server.ServerEndpoint;
4. import lombok.NonNull;
5. import lombok.extern.slf4j.Slf4j;
6. import org.springframework.beans.BeansException;
7. import org.springframework.context.ApplicationContext;
8. import org.springframework.context.ApplicationContextAware;
9. import org.springframework.stereotype.Component;
11. import java.util.concurrent.*;
15. @Slf4j
16. @ServerEndpoint(value = "/ws/url")
17. @Component
18. public class WebSocketServer implements ApplicationContextAware {
20.     //线程安全的数据结构，防止线程冲突，Session就是和前端建立连接后由DI容器自动创建的
21.     private final static ConcurrentHashMap<String, Session> sessions = new ConcurrentHashMap<>();
22.     private final static ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);
24.     //为了获取Bean的字段
25.     private static ApplicationContext _applicationContext;
27.     private static SysDataServer sysDataServer;
29.     @Override
30.     public void setApplicationContext(@NonNull ApplicationContext applicationContext) throws BeansException         {
31.         _applicationContext = applicationContext;
32.         //启动定时任务
33.         startScheduledTask();
34.     }
36.     /**
37.      * 开始连接
38.      * @param session 客户端传来的session
39.      */
40.     @OnOpen
41.     public void onOpen(Session session) {
42.         sessions.put(session.getId(), session);
43.         session.setMaxIdleTimeout(30000);
44.         System.out.println("连接：" + session.getId());
45.     }
47.     /**
48.      * 收到客户端消息
49.      * @param message 来自前端的消息
50.      */
51.     @OnMessage
52.     public void onMessage(String message) {
53.         log.info("onMessage: " + message);
54.     }
56.     /**
57.      * 断开连接
58.      */
59.     @OnClose
60.     public void onClose(Session session) {
61.         for (String key : sessions.keySet()) {
62.             if (key.equals(session.getId())) {
63.                 sessions.remove(key);
64.                 System.out.println("关闭" + session.getId());
65.             }
66.         }
67.     }
69.     /**
70.      * 连接失败出现异常
71.      * @param t 异常
72.      */
73.     @OnError
74.     public void onError(Throwable t) {
75.         log.error(t.getMessage(), t);
76.     }
78.     /**
79.      * 定时任务启动，两秒一发送
80.      */
81.     private static void startScheduledTask(){
82.         scheduler.scheduleAtFixedRate(()->{
83.             sysDataServer = _applicationContext.getBean(SysDataServer.class);
84.             
85.             //我自己的业务逻辑，获取JsonString数据然后发给前端
86.             String systemMessage = sysDataServer.toJSONString(sysDataServer.collectData());
87.             broadcast(systemMessage);
88.             
89.         }, 0, 2, TimeUnit.SECONDS);
90.     }
91.    
92.         //发送数据
93.     private static void broadcast(String message){
94.         for (Session session : sessions.values()) {
95.             session.getAsyncRemote().sendText(message);
96.             System.out.println("已发送：" + session.getId());
97.         }
98.     }
99. }

复制代码

js部门代码展示

1. import { ref } from 'vue';
3. const processes = ref([]);
5. const ws = new WebSocket('ws://localhost:8080/ws/url');
7. ws.onopen = () => {
8.   console.log('WebSocket 连接成功');
9.   socket.send("Hello, Server!");
10. };
12. ws.onmessage = (event) => {
13.   const data = JSON.parse(event.data);
14.   // 处理后端数据
15.   processes.value = data.map(process => ({
16.     pid: process.pid,
17.     pname: process.pName,
18.     cpuUsage: process.processCpuUsage,
19.     memoryUsage: process.processMemoryUsage
20.   }));
21. };
23. ws.onclose = () => {
24.   console.log('WebSocket 连接关闭');
25. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。