带你快速了解并使用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的操作

相关推荐
盖世英雄酱581363 分钟前
Read timed out问题 排查
java·数据库·后端
狼爷15 分钟前
破解 JetBrains 的学生,后来都成了它的 “推销员”:一场用习惯换市场的长期战
java·jetbrains
.豆鲨包34 分钟前
【Android】Viewpager2实现无限轮播图
android·java
BXCQ_xuan36 分钟前
软件工程实践二:Spring Boot 知识回顾
java·spring boot·后端
老赵的博客37 分钟前
c++ unqiue指针
java·jvm·c++
o0o_-_1 小时前
【go/gopls/mcp】官方gopls内置mcp server使用
开发语言·后端·golang
wuxuanok1 小时前
SpringBoot -原理篇
java·spring boot·spring
柿蒂1 小时前
从if-else和switch,聊聊“八股“的作用
android·java·kotlin
苏三说技术1 小时前
为什么不建议在 Docker 中跑 MySQL?
后端
二饭1 小时前
Spring Boot 项目启动报错:MongoSocketOpenException 连接被拒绝排查日记
java·spring boot·后端