认识webSocket长连接

这篇具有很好参考价值的文章主要介绍了认识webSocket长连接。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1,webSocket是什么

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

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

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

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

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

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

3、创建websocket

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

4、websocket 属性

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

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

5、websocket 事件

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


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

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

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



 6、websocket 方法

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

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

ws.close() //关闭连接

7,心跳机制

为什么需要心跳机制?

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

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

心跳机制具体实现

需要前后端定义好心跳数据,客户端用定时器去发送心跳数据,当服务端收到的是客户端发送的心跳数据时,会回复响应数据给客户端,客户端收到响应后,就继续重复上述动作,如果双方超过限定时间未通讯,则服务端会认为连接已断开,停止向客户端发送数据,执行onClose断开连接。文章来源地址https://www.toymoban.com/news/detail-834206.html

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('断连中');
};

到了这里,关于认识webSocket长连接的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网络通信协议-HTTP、WebSocket、MQTT的比较与应用

    在今天的数字化世界中,各种通信协议起着关键的作用,以确保信息的传递和交换。HTTP、WebSocket 和 MQTT 是三种常用的网络通信协议,它们各自适用于不同的应用场景。本文将比较这三种协议,并探讨它们的主要应用领域。 HTTP (超文本传输协议) HTTP  是最常见的协议之一

    2024年02月05日
    浏览(61)
  • 前端面试:【网络协议与性能优化】HTTP/HTTPS、TCP/IP和WebSocket

    嗨,亲爱的Web开发者!在构建现代Web应用时,了解网络协议是优化性能和确保安全性的关键。本文将深入探讨HTTP/HTTPS、TCP/IP和WebSocket这三个网络协议,帮助你理解它们的作用以及如何优化Web应用的性能。 1. HTTP/HTTPS协议: HTTP(超文本传输协议): HTTP是用于在Web上传输数据的

    2024年02月11日
    浏览(51)
  • Websocket的基本认识、使用与封装

    目录 一、Websocket是什么 二、Websocket的基本使用 使用介绍 第一步 第二步 第三步 第四步 常用API介绍  WebSocket(url[, protocols]) WebSocket.readyState  WebSocket.send(data) WebSocket.close([code[, reason]]) WebSocket.bufferedAmount WebSocket.extensions WebSocket.binaryType 三、Websocket的封装 vue代码 react代码     

    2024年02月03日
    浏览(32)
  • 【Vue3+Ts project】认识 Websocket 以及 socket.io 库

    目录 Websocket  socket.io  Socket.iO 事件名总结: Socket.IO 方法总结 作用: WebSocket 仍然提供实时的双向通信功能,使用Vue3 应用程序能够与服务器进行实时数据交换 降低延迟和网络开销:相比传统的HTTP请求-响应模式,WebSocket建立了持久连接,减少了网络开销和延迟,适用于需要

    2024年02月13日
    浏览(37)
  • vue项目中使用websocket连接后立马断开(websocket连接后瞬间断开)

    问题原因(连接后断连的原因):前端给后端传递Authourization(token验证)时,后端需要接收处理并设置响应标头,不然就容易出现上叙错误; 解决方法: 1、传递参数和验证权限; 2、后端处理后前端收到的响应标头;  然后,连接后断连的问题就解决啦!感觉有用,就一键

    2024年02月11日
    浏览(47)
  • Go语言github.com/gorilla/websocket框架websocket协议通信实战

          websocket是实际开发中比较常用的应用层协议,本文利用github.com/gorilla/websocket框架进行websocket通信实战。 目录 1.下载github.com/gorilla/websocket 2.websocket服务端 3.websocket Go客户端 4.websocket 网页客户端 5.运行结果展示 go get github.com/gorilla/websocket 服务器:  Go语言客户端:  We

    2024年02月16日
    浏览(49)
  • WebSocket协议介绍

    WebSocket 协议是一种基于 TCP 的通讯协议,它允许双向通信,使客户端和服务器之间的数据交换变得更加高效。在本文中,我们会深入了解 WebSocket 协议以及它对现代 Web 应用程序的重要性和应用场景。   WebSocket 协议是一种全双工的通讯协议,它使用标准 HTTP/HTTPS 端口(80 和

    2024年02月14日
    浏览(43)
  • [前端基础]websocket协议

    (1)websocket websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了. websocket协议具有天然的优势处理前端多线程并发,并且只需要一

    2024年02月08日
    浏览(42)
  • WebSocket 协议及其使用案例

    WebSocket 协议是一种用于实时通信、全双工的网络协议。它运行在传输层之上,通常基于 TCP 连接。相较于传统的 HTTP 协议,WebSocket 协议能够在单个连接上进行 双向通信 ,实现 数据的实时交互 ,因此在实时性较高的应用中表现得尤为出色。 WebSocket 协议是一种允许服务器和客

    2024年02月10日
    浏览(42)
  • java实现websocket握手协议

    其中最重要的是最后几个换行不要丢,将字符串转成byte[]写给客户端即可 收到的掩码转换 下面是服务器向客户端发送消息

    2024年02月08日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包