初探websocket - 学笔记及小demo

最新推荐文章于 2022-05-18 16:47:18 发布

无骛

最新推荐文章于 2022-05-18 16:47:18 发布

阅读量128

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_36737839/article/details/108327689

版权

1、了解WebSocket
- 什么是WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
- 特点
（1）服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双工通信，属于服务器推送技术的一种。
（2）与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能够通过各种HTTP代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws(如果加密则是wss)，服务器网址就是URL
- 优点
使用websocket来实现推送，相较于Ajax轮询，能够更好的节省服务器资源和带宽，并且能够进行更实时的通信。
Ajax轮询，是在特定时间间隔，由浏览器对服务器发出HTTP请求，然后由服务端返回最新的数据给客户端的浏览器。不断的发送请求，会浪费很多的带宽资源，而其中有效的请求又只有少部分。

2、客户端实现：websocket API及各浏览器的支持情况
浏览器支持情况：https://www.caniuse.com/#search=websocket
// 创建WebSocket对象
var Socket = new WebSocket(url, [protocol]);
WebSocket属性：
Socket.readyState
CONNECTING: 0 - 表示连接尚未建立
OPEN: 1 - 表示连接已建立，可以进行通信
CLOSING: 2 - 表示连接正在进行关闭
CLOSED: 3 - 表示连接已经关闭或者连接不能打开
Socket.bufferedAmount
只读属性bufferedAmount已被send()放入正在队列中等待传输，但是还没有发出UTF-8文本字节数。
即表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束。
WebSocket事件(回调函数)：
Socket.onopen - 连接建立时触发，用于指定连接成功后的回调函数
Socket.onopen = function () {
Socket.send(‘Hello Server!’);
}
// 如果要指定多个回调函数，可以使用addEventListener方法。
Socket.addEventListener(‘open’, function(event) {
ws.send(‘Hello Service’);
});
Socket.onmessage - 客户端接收服务端数据时触发，用于指定收到服务器数据后的回调函数。
Socket.onerror - 通信发生错误时触发，
Socket.onclose - 连接关闭时触发，用于指定连接关闭后的回调函数。
WebSocket方法：
Socket.send() - 使用连接发送数据
Socket.close() - 关闭连接

3、服务端实现
常用的 Node 实现有以下三种：
µWebSockets
Socket.IO
WebSocket-Node

4、实现Web消息推送，清楚网络异常的处理机制（例如心跳重连等）

心跳检测机制：
心跳检测机制目的是确认客户端和服务器是否处于正常连接状态，防止在使用过程中因遭遇网络等问题造成数据丢失、或产生多余连接等。

心跳检测设计思路：
（1）使用计时器，每隔一段时间向服务器发送一条数据，服务器收到数据后再发送给客户端。正常情况下，客户端通过onmessage事件是能监听到服务器返回的数据的，说明请求正常。
（2）如果在指定时间内，客户端未能收到服务器的响应信息，就判定连接已断开，使用websocket.close关闭连接
（3）通过onclose事件监听关闭操作，监听到关闭时，进行重连操作

websocket即时通信初步实现：

首先创建新的文件夹，进行初始化npm init

进行依赖安装：npm intall ws

在文件夹下新建文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chat</title>
</head>
<body>
    <script>
        let clientName = '';
        var socket;
        const addText = (msg, position) => {
    
            var target = document.getElementById("responseText");
            target.innerHTML += `
                <div style="display: flex;justify-content: ${
      position};

最低0.47元/天解锁文章

无骛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探websocket - 学笔记及小demo

1、了解WebSocket    - 什么是WebSocket        WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。    - 特点       &
复制链接

扫一扫

专栏目录