带你快速了解并使用WebSocket

WebSocket

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

  • WebSocket和Http协议的却别
  1. Http是短连接,WebSocket是长连接
  2. Http通信是单向的,基于请求响应模式
  3. WebSocket支持双向通信
  4. 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的操作

相关推荐
Re.不晚2 分钟前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
雷神乐乐8 分钟前
Maven学习——创建Maven的Java和Web工程,并运行在Tomcat上
java·maven
码农派大星。11 分钟前
Spring Boot 配置文件
java·spring boot·后端
顾北川_野18 分钟前
Android 手机设备的OEM-unlock解锁 和 adb push文件
android·java
江深竹静,一苇以航21 分钟前
springboot3项目整合Mybatis-plus启动项目报错:Invalid bean definition with name ‘xxxMapper‘
java·spring boot
confiself36 分钟前
大模型系列——LLAMA-O1 复刻代码解读
java·开发语言
Wlq041541 分钟前
J2EE平台
java·java-ee
XiaoLeisj1 小时前
【JavaEE初阶 — 多线程】Thread类的方法&线程生命周期
java·开发语言·java-ee
杜杜的man1 小时前
【go从零单排】go中的结构体struct和method
开发语言·后端·golang
幼儿园老大*1 小时前
走进 Go 语言基础语法
开发语言·后端·学习·golang·go