什么是`WebSocket`

WebSocket 是一种基于TCP的，在Web应用程序中实现双向通信的协议，它实现了浏览器与服务器的全双工通讯，允许服务器主动发起信息个客户端。 websocket是一种持久协议，http是非持久协议。在websocket出现之前，是通过ajax轮询来实现网站实时推送消息给浏览器客户端。轮询是指由浏览器每隔一段时间向服务器发出 HTTP 请求，然后服务器返回最新的数据给客户端。轮询的效率低，非常浪费资源。

`WebSocket` 通信流程

前端使用 new WebSocket(socketUrl) 方法创建一个WebSocket对象。socketUrl 是后端提供的WebSocket路由地址，用于建立与后端的连接。
当 WebSocket 连接成功时，前端的 onopen 回调函数将被触发。在该回调函数内，前端可以执行一些初始化操作，例如发送认证信息、订阅频道等。
后端接收到来自前端的WebSocket连接请求后，执行相应的处理逻辑，包括验证身份、建立连接等。一旦后端建立了与前端的连接，后端的 onOpen 回调函数将被触发。
前后端建立了WebSocket连接之后，双方可以通过发送消息进行通信。前端可以使用 WebSocket 对象的 send 方法向后端发送消息，后端可以使用相应的WebSocket库或框架来处理接收到的消息。
当后端收到前端发送的消息时，后端的 onMessage 回调函数将被触发。在该回调函数内，后端可以处理接收到的消息，并根据需要发送响应消息给前端。
前端则通过监听 WebSocket 对象的 onmessage 回调函数来接收来自后端的消息。在该回调函数内，前端可以根据接收到的消息进行相应的处理，例如更新页面内容、显示通知等。
如果需要关闭WebSocket连接，前端可以调用 WebSocket 对象的 close 方法。后端则可以在收到前端的关闭请求时执行一些清理操作，并关闭连接。当连接关闭后，前端的 onclose 回调函数和后端的 onClose 回调函数将被触发。
前端和后端都需要处理潜在的错误情况。前端可以通过监听 WebSocket 对象的 onerror 回调函数来处理与WebSocket连接相关的错误。后端也可以处理可能发生的错误并发送错误消息给前端。
通过这样的流程，前后端可以实现实时的双向通信，从而构建出更加交互式和动态的网络应用程序。

前端vue中使用：

        const store = useStore();
        let socket = null;
        let socketUrl = `ws://127.0.0.1:3000/websocket/${store.state.user.token}`; // 假设传了个store中存储的用户 token 信息

        onMounted(() => {
            socket = new WebSocket(socketUrl);

            socket.onopen = () => {
                console.log("socket connected!");
            }

            socket.onmessage = (msg) => {
                
                let data = JSON.parse(msg.data);
                console.log(`从后端接收到了消息! ${data}`);
            }

            socket.onclose = () => {
                console.log("socket disconnected!");
            }
        });

        onUnmounted(() => {   // 断开连接后，关闭socket
            socket.close();
        })

后端SpringBoot中使用：

@Component
@ServerEndpoint("/websocket/{token}")  // 注意不要以'/'结尾
public class WebSocketServer {

    @OnOpen
    public void onOpen(Session session, @PathParam("token") String token) {
        // 建立连接
        System.out.println("Connected!");
    }

    @OnClose
    public void onClose() {
        // 关闭链接
        System.out.println("Disconnected!");
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 从 Client(前端) 接收消息
    }

    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    // 发送消息给前端
    public void sendMessage(String message) {   // 向前端发送消息

    }
}

小白第一次写文章，如有问题，欢迎各位佬佬指正！

WebSocket的简单认识

什么是WebSocket

WebSocket 通信流程

什么是`WebSocket`

`WebSocket` 通信流程