WebSocket的运用

aiguangyuan

已于 2022-07-19 17:14:06 修改

阅读量249

点赞数

分类专栏： HTML 文章标签：前端开发 HTML WebSocket

于 2019-07-05 01:28:59 首次发布

本文链接：https://blog.csdn.net/weixin_40629244/article/details/94677965

版权

HTML 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据，下面我们用一个实例来示范一下。

客户端（建立链接、发送消息、接收消息）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>WebSocket运用</title>
</head>
<body>
    <button id="connect">连接到WS服务器开始接收消息</button>
    <button id="send">向服务器发送一条消息</button>
    <button id="close">断开到服务器的连接</button>
    <script>
        // 与服务器进行通信的套接字/插座
        var socket = null; 
        connect.onclick = function(){
            // 连接到WS服务器 —— 永久连接
            socket = new WebSocket('ws://127.0.0.1:9001');
            // 接收服务器发来的消息
            socket.onmessage = function(e){
                console.log('接收到服务器的一个消息"', e.data);
            }
        };
        send.onclick = function(){
            // 向WS服务器发送一条消息
            socket.send('I am Client - '+ new Date().getTime());
        };
        
        close.onclick = function(){
            // 断开到WS服务器的连接
            socket.close();
        }

    </script>
</body>
</html>

服务端（接收消息、推送消息）

// 使用第三方ws模块创建一个WS协议的服务器
const ws = require('ws');

// 创建ws服务器，监听指定的端口
var server = new ws.Server({ port: 9001 });
console.log('WS服务器开始监听端口');

server.on('connection', (socket) => {
    console.log('WS服务器接收到一个连接');

    // WS服务器不停的向客户端发送消息
    var counter = 0;
    var timer = setInterval(() => {
        counter++;
        socket.send('I am Server - ' + counter);
    }, 1000);

    // WS服务器接收客户端发来的消息
    socket.on('message', (msg) => {
        console.log('服务器接收到消息：' + msg);
    })

    // WS服务器接收到客户端发来的断开连接请求
    socket.on('close', () => {
        console.log('客户端断开了连接')
        // 不再继续发送消息
        clearInterval(timer);
    })
})