认识webSocket长连接

1,webSocket是什么

WebSocket 是HTML5开始提出的一种在单个 TCP 连接上进行全双工通讯的协议。用于在web端实现长连接的需求,如在线聊天室,弹幕,实时资讯更新等等

2,什么情形下需要使用websocket?

短链接是通过客户端主动发起请求,无论是发送数据还是请求数据,都是客户端主动发起,服务端收到请求响应状态码及相关数据发送给客户端后,至此通讯结束。

连接→数据传输→关闭连接

而长连接则是保持实时信息同步的需要,需要保持长时间通讯状态。客户端和服务端都可以随时发送数据和接收数据,除非客户端或服务端主动关闭连接,至此通讯结束

连接→数据传输→数据传输→......→关闭连接;

3、创建websocket

javascript 复制代码
let ws = new WebSocket(url,[protocol])
//url 为服务端地址
//protocol 可选参数,指定可接受的子协议

4、websocket 属性

javascript 复制代码
ws.readyState;
//readyState表示连接状态 0 未连接,1 已连接,2 连接正在关闭,3 连接已关闭或连接失败

ws.bufferedAmount :
// 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数

5、websocket 事件

javascript 复制代码
ws.onopen = function(){} //连接建立触发回调函数


ws.onmessage = function(){} // 接收服务端数据回调函数

ws.onerror = function(){} // 连接报错回调函数

ws.close = function(){} // 连接关闭时触发回调函数

6、websocket 方法

javascript 复制代码
ws.send(data) // 客户端向服务端发送数据 只接受文本形式的数据,复杂数据需要序列化

let msgObj = {
    msg: "你好,请求连接"
}
ws.send(JSON.stringify(msgObj))

ws.close() //关闭连接

7,心跳机制

为什么需要心跳机制?

a、客户端可能存在极端网络环境导致掉线,服务端无法判断连接已经断开。如果客户端和服务端有心跳数据传输,服务端会比较及时发现连接点开,执行onClose。

b、路由节点防火墙会关闭尝试长时间不通讯的socket,导致socket断开,所以客户端需要向服务端定时发送心跳数据保持连接不中断。

心跳机制具体实现

需要前后端定义好心跳数据,客户端用定时器去发送心跳数据,当服务端收到的是客户端发送的心跳数据时,会回复响应数据给客户端,客户端收到响应后,就继续重复上述动作,如果双方超过限定时间未通讯,则服务端会认为连接已断开,停止向客户端发送数据,执行onClose断开连接。

javascript 复制代码
let $timeout = null;
let ws = new WebSocket("ws://127.0.0.1:8783");
ws.onopen = function(evt) {
    let $_content = {
        "event": "join",
        "mode": 1,
        "group_id": 0,
        "from_user_id": "10086",
        "from_username": "john",
        "to_user_id": "10000",
        "content": "加入会话",
    };
    ws.send(JSON.stringify($_content));
};

ws.onmessage = function(evt) {
    console.log( "接受消息: " + evt.data);
    let _obj = JSON.parse(evt.data);
    if (_obj.data.event === 'init') {
        sendHeartbeat();
    }
};

function sendHeartbeat() {
    console.log('客户端定时发送心跳');
    ws.send('{"event":"ping","content":"在线中"}');
    $timeout = setTimeout(sendHeartbeat, 3000);
}

ws.onclose = function() {
    clearTimeout($timeout);
    console.log('断连中');
};
相关推荐
2301_780789664 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
一只栖枝6 小时前
HCIA-Security 认证精讲!网络安全理论与实战全掌握
网络·web安全·网络安全·智能路由器·hcia·it·hcia-security
FileLink跨网文件交换6 小时前
文件摆渡系统十大软件|文件摆渡系统如何构建网络安全呢?
网络
晨欣9 小时前
大型语言模型(LLM)在网络安全中最具商业价值的应用场景(Grok3 回答 DeepSearch模式)
网络·web安全·语言模型
有书Show10 小时前
个人IP的塑造方向有哪些?
网络·网络协议·tcp/ip
HHRL-yx10 小时前
C++网络编程 5.TCP套接字(socket)通信进阶-基于多线程的TCP多客户端通信
网络·c++·tcp/ip
迈威通信10 小时前
接口黑洞?破!安全堡垒?筑!冰火炼狱?战!MES7114W终极掌控
网络·安全
代码搬运媛10 小时前
HTTP REST API、WebSocket、 gRPC 和 GraphQL 应用场景和底层实现
websocket·http·graphql
baynk11 小时前
wireshark的常用用法
网络·测试工具·wireshark·ctf