浅谈WebSocket

PS：带有自己一点个人的理解

1.什么是websocket，为什么要去使用它

首先看一下[维基百科上对Websocket的定义](WebSocket - 维基百科，自由的百科全书 (wikipedia.org))，WebSocket是一种网络传输协议，可在单个TCP连接上进行全双工通信，位于OSI模型应用层应用层。

通过这个定义，其实就已经能够看出websocket的重要性了。我们一般对前后端进行交互采用http协议，但http是一种无状态的、无连接的、单向的应用层协议。因此对于C/S架构，客户端只能向服务端发送请求之后服务端才能向客户端发送数据，服务端属于被动的一方，这使得在一些高实时性要求的业务中，http要反复连接甚至不关闭，而且速度也有些慢了。

Websocket作为全双工通信的协议，中间的传输信道相当自由，不管是服务端还是客户端都能够自由发送消息，速度上便能够大大提升。

2.简单展示一下我使用Websocket的用例

前端js和后端springboot作为演示对象，这是我自己的监控操作系统信息的一个小项目，我采用的是Websocket的原生注解。

以下是部分代码演示。

首先要创建一个后端的Websocket服务器端点

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
@Component
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

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

import com.example.cypherserverside.service.collect.SysDataServer;
import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import lombok.NonNull;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.stereotype.Component;

import java.util.concurrent.*;



@Slf4j
@ServerEndpoint(value = "/ws/url")
@Component
public class WebSocketServer implements ApplicationContextAware {

    //线程安全的数据结构，防止线程冲突，Session就是和前端建立连接后由DI容器自动创建的
    private final static ConcurrentHashMap<String, Session> sessions = new ConcurrentHashMap<>();
    private final static ScheduledExecutorService scheduler = Executors.newScheduledThreadPool(1);

    //为了获取Bean的字段
    private static ApplicationContext _applicationContext;

    private static SysDataServer sysDataServer;

    @Override
    public void setApplicationContext(@NonNull ApplicationContext applicationContext) throws BeansException 	{
        _applicationContext = applicationContext;
        //启动定时任务
        startScheduledTask();
    }

    /**
     * 开始连接
     * @param session 客户端传来的session
     */
    @OnOpen
    public void onOpen(Session session) {
        sessions.put(session.getId(), session);
        session.setMaxIdleTimeout(30000);
        System.out.println("连接：" + session.getId());
    }

    /**
     * 收到客户端消息
     * @param message 来自前端的消息
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("onMessage: " + message);
    }

    /**
     * 断开连接
     */
    @OnClose
    public void onClose(Session session) {
        for (String key : sessions.keySet()) {
            if (key.equals(session.getId())) {
                sessions.remove(key);
                System.out.println("关闭" + session.getId());
            }
        }
    }

    /**
     * 连接失败出现异常
     * @param t 异常
     */
    @OnError
    public void onError(Throwable t) {
        log.error(t.getMessage(), t);
    }

    /**
     * 定时任务启动，两秒一发送
     */
    private static void startScheduledTask(){
        scheduler.scheduleAtFixedRate(()->{
            sysDataServer = _applicationContext.getBean(SysDataServer.class);
            
            //我自己的业务逻辑，获取JsonString数据然后发给前端
            String systemMessage = sysDataServer.toJSONString(sysDataServer.collectData());
            broadcast(systemMessage);
            
        }, 0, 2, TimeUnit.SECONDS);
    }
    
	//发送数据
    private static void broadcast(String message){
        for (Session session : sessions.values()) {
            session.getAsyncRemote().sendText(message);
            System.out.println("已发送：" + session.getId());
        }
    }
}

js部分代码展示

import { ref } from 'vue';

const processes = ref([]);

const ws = new WebSocket('ws://localhost:8080/ws/url'); 

ws.onopen = () => {
  console.log('WebSocket 连接成功');
  socket.send("Hello, Server!");
};

ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  // 处理后端数据
  processes.value = data.map(process => ({
    pid: process.pid,
    pname: process.pName,
    cpuUsage: process.processCpuUsage,
    memoryUsage: process.processMemoryUsage
  }));
};

ws.onclose = () => {
  console.log('WebSocket 连接关闭');
};