WebSocket--快速介绍

最新推荐文章于 2023-07-14 15:16:28 发布

猫和古巷

最新推荐文章于 2023-07-14 15:16:28 发布

阅读量281

点赞数 2

分类专栏： springboot 文章标签： websocket 网络服务器

本文链接：https://blog.csdn.net/maoheguxiang/article/details/129597083

版权

springboot 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

WebSocket

文章目录

WebSocket

介绍：

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

WebSocket 和 HTTP 区别

相同点：

 WebSocket  都是一样基于 TCP 的可靠性传输协议；

异同点：

WebSocket 可以双向发送或接受信息，而 HTTP 是单向的（HTTP 通信只能由客户端发起，不具备服务器主动推送能力）；

WebSocket 的使用，需要先进行一次客户端与服务器的握手，两者建立连接后才可以正常双向通信，而 HTTP 是一个主动的 Request 对应一个被动的Response；

协议标识符

如果服务器网址是 HTTP 那么 WebSocket 对应的是 ws
如果服务器网址是 HTTPS 加密的那么 WebSocket 对应的是 wss

特点

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种
HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

思考：

既然WebSocket支持双向通信，功能看似比HTTP强大，那么我们是不是可以基于WebSocket开发所有的业务功能？
WebSocket缺点：
1. 服务器长期维护长连接需要一定的成本
2. 各个浏览器支持程度不一
3. WebSocket 是长连接，受网络限制比较大，需要处理好重连

结论：

WebSocket并不能完全取代HTTP，它只适合在特定的场景下使用
- 视频弹幕
- 网页聊天
- 体育实况更新
- ……

为什么需要 WebSocket？

因为 HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。
比如，你打游戏，一步一请求，步步都在卡，及其不美好

WebSocket 常用方法

常用方法	描述
Socket.send()	通过 Socket 向服务器发送信息
Socket.close()	关闭 Socket 连接

WebSocket 常用属性

常用属性	描述
Socket.readyState	获取当前链接状态	0:正在连接中，1:连接正常可以通信，2:连接关闭中，3:连接已关闭/连接失败
Socket.url	获取当前连接地址
Socket.binaryType	获取传输的数据类型

WebSocket 生命周期

生命周期	描述
Socket.onopen	连接建立时触发
Socket.onmessage	客户端接收服务端数据时触发
Socket.onerror	通信发生错误时触发
Socket.onclose	连接关闭时触发

SpringBoot如何使用WebSocket简单入门：

一个简单的HTML页面

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
</head>
<body>
    <input id="text" type="text" />
    <button onclick="send()">发送消息</button>
    <button onclick="closeWebSocket()">关闭连接</button>
    <div id="message">
    </div>
</body>
<script type="text/javascript">
    var websocket = null;
    var clientId = Math.random().toString(36).substr(2);

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);
    }
    else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(){
        setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
	
	//关闭连接
    function closeWebSocket() {
        websocket.close();
    }
</script>
</html>

引入Maven依赖

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

新建一个WebSocketConfig配置类，注册WebSocket的服务端组件

@Configuration
public class WebSocketConfig {

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

新建一个WebSocketServer类，用于与客户端通信
- 把WebSocketServer当成一个controller使用即可

@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();
            }
        }
    }

}

使用定时任务测试WebSocket

@Component
public class WebSocketTask {
    @Autowired
    private WebSocketServer webSocketServer;

    /**
     * 通过WebSocket每隔5秒向客户端发送消息
     */
    @Scheduled(cron = "0/5 * * * * ?")
    public void sendMessageToClient() {
        webSocketServer.sendToAllClient("这是来自服务端的消息：" + DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));
    }
}

WebSocket的单播，组播，广播简介：

单播(Unicast)：

点对点，比如私信聊天等
如何实现单播

组播(Multicast)：

一个组才能收到，游戏公告，发布订阅等

广播(Broadcast)：

所有人都能收到，视频弹幕等

猫和古巷

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WebSocket--快速介绍

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。点对点，比如私信聊天等如何实现单播。
复制链接

扫一扫