WebSocket 学习笔记
WebSocket 学习笔记
因为项目原因需要用到双工通信,所以比较详细的学习了一下浏览器端支持的 WebSocket.
并记录一些遇到的问题。
简介
WebSocket 一般是指浏览器提供的 API 接口,允许 Web 页面通过 WebSocket 协议与远程主机进行双向通信。
注:本接口不允许到底层网络的原始访问。举例说明,本接口不能被用于实现一个不通过自定义服务器代理发送消息的 IRC(网间实时聊天,Internet Relay Chat)客户端。
接口说明 文档
WebSocket
对象提供了用于创建和管理 WebSocket 连接,以及可以通过该连接发送和接收数据的 API。
常见问题
1.基于 WebSocket 心跳功能
因为 WebSocket
本身不提供心跳功能,所以在有些时候无法及时正确的判断与后端的连接状态,很多时候就需要自己来进行实现。可以通过与后端约定定时握手的形式来实现心跳功能。比如说每 30 秒通信一次。
/** WebSocket 心跳 **/
const msg = "heatbeat"; // 约定的心跳消息
let timer = null; // 定时器
let lastMsgTimestamp = null; // 时间戳
let ws = new WebSocket(""); // ws 实例
ws.onopen = e => {
// 更新时间戳
lastMsgTimestamp = new Date().getTime();
if (e.type === "open") {
// 创建心跳连接
if (timer) {
clearInterval(timer);
}
timer = setInterval(heatbeat, 10000);
}
};
function heatbeat() {
if (ws) {
if (new Date().getTime() - lastMsgTimestamp > 300000) {
clearInterval(timer);
console.log("心跳已断开");
// ... 心跳断开后的处理
} else {
// 发送约定的心跳
ws.send(msg);
}
}
}
/** 记得关闭连接时清楚定时器 **/
TODO 通信中断重连问题
WebSocket 学习笔记的更多相关文章
- WebSocket学习笔记IE,IOS,Android等设备的兼容性问
WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...
- WebSocket学习笔记——无痛入门
WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报 分类: 物联网学习笔记(37) 版权声明:本文为博主原 ...
- WebSocket 学习笔记--IE,IOS,Android等设备的兼容性问题与代码实现
一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏览器来实现,其中数据通信,准备使用WebSocket的方式.于是,我开始 ...
- Spring Boot + WebSocket 学习笔记
首先需要了解一下背景,什么是WebSocket以及为什么要用WebSocket. 在常见的Web应用中,客户端与服务器通信,都是通过HTTP协议进行通信,客户端一次请求,服务端一次响应.而WebSoc ...
- WebSocket学习笔记
参考文章链接:http://www.ruanyifeng.com/blog/2017/05/websocket.html 简单示例:https://www.yiibai.com/websocket/p ...
- Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例
在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...
- SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序
SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序 快速开始 本指南将引导您完成创建“hello world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消 ...
- WeX5学习笔记
目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...
- Maven学习笔记-03-Eclipse下maven项目在Tomcat7和Jetty6中部署调试
现在最新的Eclipse Luna Release 已经内置了Maven插件,这让我们的工作简洁了不少,只要把项目直接导入就可以,不用考虑插件什么的问题,但是导入之后的项目既可以部署在Tomcat也可 ...
随机推荐
- android调用第三方库——第一篇 (转载)
转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...
- 模板 - 数学 - 快速傅里叶变换/快速数论变换(FFT/NTT)
先看看. 通常模数常见的有998244353,1004535809,469762049,这几个的原根都是3.所求的项数还不能超过2的23次方(因为998244353的分解). 感觉没啥用. #incl ...
- (水题)洛谷 - P1553 - 数字反转(升级版) - 字符串格式转换
https://www.luogu.org/problemnew/show/P1553 忘记给整数加上前导零去除的代码了.其实不去也可以,额外的进位用一个carry另外存起来就好. #include& ...
- 基础BFS+DFS poj3083
//满基础的一道题 //最短路径肯定是BFS. //然后靠右,靠左,就DFS啦 //根据前一个状态推出下一个状态,举靠左的例子,如果一开始是上的话,那么他的接下来依次就是 左,上 , 右 , 下 // ...
- bzoj 2064: 分裂【状压dp】
参考:https://www.cnblogs.com/liu-runda/p/6019426.html 有点神奇 大概就是显然最直观的转移是全部合起来再一个一个拆,是n+m次,然后设f[i][j]为分 ...
- nginx部署h5项目
1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...
- P1226神经网络
提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...
- Python实现两已知排好序的列表合并成一个排好序的列表
#方法0.5--- lst1 = [1, 3, 7, 9, 12] lst2 = [4, 8, 9, 13, 15, 19] def merge(a, b): c = [] h = j = 0 whi ...
- CentOS下查看网络状态
查看网络状态:lsof -Pnl +M -i4 显示ipv4服务及监听端情况netstat -anp 所有监听端口及对应的进程netstat -tlnp 功能同上 网络基本命令 (1)network ...
- bzoj1878 [SDOI2009]HH的项链【莫队】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1878 以每个询问左端点所属的块的编号为第一关键字,右端点本身为第二关键字,排序,然后保利扫描 ...