带你快速了解并使用WebSocket

WebSocket

⭐WebSocket是基于TCP协议的一种新的网络协议。他实现了浏览器与服务器全双工通信，浏览器与服务器只需要完成一次握手，两者就可以创建持久性的连接，并进行双向数据传输（服务器也可以所示向浏览器发送数据）

WebSocket和Http协议的却别

Http是短连接，WebSocket是长连接
Http通信是单向的，基于请求响应模式
WebSocket支持双向通信
HTTP和WebSocket底层都是TCP连接

意思就是我浏览器不发请求，后端也可以自动推送

实例

要使用ws协议当然首先应该在前端发送ws请求

html 复制代码

//创建Id参数 参数36指的是以36进制创建字符串
var Id=Math.random().toString(36).substr();
//连接WebSocket节点
Websocket=new WebSocket("ws://localhost:8080/ws/"+Id);


//连接成功的回调方法：
websocket.onopen=function(){
   setMessageInnerHTML("连接成功");
//监听窗口关闭时间，对应的窗口关闭，就断开ws连接
window.οnbefοreunlοad=function(){
   websocket.close();
}
}

这只是一小部分函数，还可以进行很多的操作

第一步：导入WebSocket的maven坐标

java 复制代码

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

第二步：创建服务端组件WebSocketServer，实现与客户端通信

java 复制代码

/**
 * WebSocket服务
 */
@Component
//这个注解相当于控制类接收请求进行方法调用功能一致
@ServerEndpoint("/ws/{sid}")
public class WebSocketServer {

    //存放会话对象
    private static Map<String, Session> sessionMap = new HashMap();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        System.out.println("客户端：" + sid + "建立连接");
        sessionMap.put(sid, session);
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, @PathParam("sid") String sid) {
        System.out.println("收到来自客户端：" + sid + "的信息:" + message);
    }
    /**
     * 连接关闭调用的方法
     * @param sid
     */
    @OnClose
    public void onClose(@PathParam("sid") String sid) {
        System.out.println("连接断开:" + sid);
        sessionMap.remove(sid);
    }

    /**
     * 群发
     * @param message
     */
    public void sendToAllClient(String message) {
        Collection<Session> sessions = sessionMap.values();
        for (Session session : sessions) {
            try {
                //服务器向客户端发送消息
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

}

第三步：创建配置类WebSocketConfiguration注册WebSocket的服务端组件

java 复制代码

/**
 * WebSocket配置类，用于注册WebSocket的Bean
 */
@Configuration
public class WebSocketConfiguration {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

第四步：创建任务类，向客户端推送数据

java 复制代码

    public void sendMessageToClient() {
        webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));
    }

这样就完成了一个基础的WebSocket的操作