欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

五分钟学会HTML5的WebSocket协议

程序员文章站 2022-05-31 19:41:54
1、背景   很多网站为了实现推送技术，所用的技术都是 Ajax轮询 。轮询是在特定的的时间间隔由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其 ......

1、背景

  很多网站为了实现推送技术，所用的技术都是ajax轮询。轮询是在特定的的时间间隔由浏览器对服务器发出http请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而http请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。html5新增的一些新协议websocket,可以提供在单个tcp连接上提供全双工，双向通信，能够节省服务器资源和带宽，并且能够实时进行通信。

2、websocket介绍

  传统的http也是一种协议，websocket是一种协议，使用http服务器无法实现websocket，

2.1.浏览器支持情况

基本主流浏览器都支持

五分钟学会HTML5的WebSocket协议

2.2.优点

相对于http有如下好处：

  • 1.客户端与服务器只建立一个tcp连接，可以使用更少的连接。
  • 2.websocket服务器端可以主动推送数据到客户端，更灵活高效。
  • 3.更轻量级的协议头，减少数据传送量。

对比轮训机制

五分钟学会HTML5的WebSocket协议

3、websocket用法

  我们了解websocket是什么，有哪些优点后，怎么使用呢？

3.1.websocket创建

websocket使用了自定义协议，url模式与http略有不同，未加密的连接是ws://，加密的连接是wss://，websocket实例使用new websocket()方法来创建，

var ws = new websocket(url, [protocol] );

第一个参数 url, 指定连接的 url。第二个参数 protocol 是可选的，指定了可接受的子协议。

3.2.websocket属性

当创建ws对象后，readystate为ws实例状态，共4种状态

  • 0 表示连接尚未建立。

  • 1 表示连接已建立，可以进行通信。

  • 2 表示连接正在进行关闭。

  • 3 表示连接已经关闭或者连接不能打开。

tips：在发送报文之前要判断状态，断开也应该有重连机制。

3.3.websocket事件

在创建ws实例对象后，会拥有以下几个事件，根据不同状态可在事件回调写方法。

  • ws.onopen 连接建立时触发

  • ws.onmessage 客户端接收服务端数据时触发

  • ws.onerror 通信发生错误时触发

  • ws.onclose 连接关闭时触发

ws.onmessage = (res) => {
  console.log(res.data);
};

ws.onopen = () => {
  console.log('open...');
};

ws.onclose=()=>{
 console.log('close...');
}

3.4.websocket方法

  • ws.send() 使用连接发送数据(只能发送纯文本数据)

  • ws.close() 关闭连接

4、demo演示

  了解websocket的一些api之后，趁热打铁，做一个小案例跑一下。

4.1.node服务器端

websocket协议与node一起用非常好，原因有以下两点：

1.websocket客户端基于事件编程与node中自定义事件差不多。

2.websocket实现客户端与服务器端长连接，node基本事件驱动的方式十分适合高并发连接

创建一个websocket.js如下：

const websocketserver = require('ws').server;
const wss = new websocketserver({ port: 8080 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        ws.send('我收到了' + message);
    });
});

打开windows命令窗口运行

五分钟学会HTML5的WebSocket协议

4.2.html客户端

新建一个index.html页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>websocket小demo</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="text" id="msg">
            <button onclick="sendmsg()">发送报文</button>
        </div>
    </div>
    <script>
        const ws = new websocket('ws://localhost:8080');
        ws.onmessage = (res) => {
            console.log(res);
        };
        ws.onopen = () => {
            console.log('open...');
        };
        ws.onclose = () => {
            console.log('close...');
        }
        function sendmsg() {
            let msg = document.getelementbyid('msg').value;
            ws.send(msg);
        }
    </script>
</body>

打开浏览器依次输入字符1,2,3，每次输入完点击发送报体，可见在ws.onmessage事件中res.data中返回来我们发的报文

五分钟学会HTML5的WebSocket协议

5、问题与总结

  以上只是简单的介绍了下websocket的api与简单用法，在处理高并发，长连接这些需求上，例如聊天室，可能websocket的http请求更加合适高效。

   但在使用websocket过程中发现容易断开连接等问题，所以在每次发送报文前要判断是否断开，当多次发送报文时，由于服务器端返回数据量不同，返回客户端前后顺序也不同，所以需要在客户端收到上一个报文返回数据后再发送下一个报文，为了避免回调嵌套过多，通过promise ，async ,await等同步方式解决。关于websocket就写这么多，如有不足，欢迎多多指正！

参考资料：
《javascript高级教程》
《深入检出nodejs》

上一篇： FineReport中如何对cpt模板加密 FineReport加密 

下一篇： 古代造假到底有多严重 此人的一次造假直接导致帝国轰然倒塌

推荐阅读