WebSocket的用法——服务器主动给客户端推送数据

୧⍤⃝�摩西摩西

于 2024-03-23 13:41:39 发布

阅读量4k

点赞数 37

分类专栏： Java 文章标签： websocket 服务器网络协议 java

本文链接：https://blog.youkuaiyun.com/qq_60396437/article/details/136965904

版权

介绍

定义

WebSocket 是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
（注：http1.1开始使用长连接，1.0默认使用短连接）

HTTP协议和WebSocket协议对比

HTTP和WebSocket底层都是TCP连接

HTTP是短连接；HTTP通信是单向的，基于请求响应模式（方向:一定是客户端浏览器主动发请求，服务器才能接受请求并响应）

WebSocket是长连接（长连接不要刷新就能get到数据）；WebSocket支持双向通信（注：首先是客户端浏览器发起请求，也就是握手，以便之后客户端浏览器能主动给服务器发送数据，服务器也能主动给客户端浏览器推送数据）

WebSocket的应用场景

视频弹幕;网页聊天;体育实况更新;股票基金报价实时更新（注：并不需要页面发请求来获取数据，而是服务器主动给客户端推送数据）

步骤

直接使用websocket.html页面作为WebSocket客户端

（每刷新页面，就是new一个新的WebSocket，即握手成功，这个连接就建立好了）

<!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;
	//随机id
    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 <