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也可 ...
随机推荐
- R Factor 如何转为c()
从 R语言本身来说 > f [1] 130015.IB 130013.IB Levels: 130013.IB 130015.IB > data = c(f) > data [1] ...
- tcpdump笔记
最好的学习: man tcpdump ....... 一.TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出分组内容的工具.tcpdump凭借强大的功能和灵活的截取策略,使其成为类 ...
- Ubuntu添加新用户,并且赋sudo权限
https://blog.csdn.net/u012897374/article/details/78827359 sudo adduser username 接下来进入root用户,如果之前就没有普 ...
- Python文件将日志文件中每天的日志拿出来
file_log.txt文件内容如下: with open('file_log.txt', 'r', encoding='utf-8') as f: for i in f: s = i.split() ...
- [AHOI2005]病毒检测
Description 科学家们在Samuel星球上的探险仍在继续.非常幸运的,在Samuel星球的南极附近,探险机器人发现了一个巨大的冰湖!机器人在这个冰湖中搜集到了许多RNA片段运回了实验基地.科 ...
- BestCoder Round #54 (div.2) 1003 Geometric Progression
题目传送门 题意:判断是否是等比数列 分析:高精度 + 条件:a[i] * a[i+2] == a[i+1] * a[i+1].特殊情况:0 0 0 0 0是Yes的,1 2 0 9 2是No的 代码 ...
- ACM_LRU页面置换算法
LRU页面置换算法 Time Limit: 2000/1000ms (Java/Others) Problem Description: sss操作系统没听课, 这周的操作系统作业完全不会, 你能帮他 ...
- php中三元运算符用法
代码如下: <?php $handle=fopen("../good/html/1.txt", "r"); while(!feof($handle)) / ...
- 521 Longest Uncommon Subsequence I 最长特殊序列 Ⅰ
给定两个字符串,你需要从这两个字符串中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列).子序列可以通过删去字符串中的某些字符实现,但不能改变剩余 ...
- 合理设置apache的连接数及进程工作方式
网站在线人数增多,访问时很慢.初步认为是服务器资源不足了,但经反复测试,一旦连接上,不断点击同一个页面上不同的链接,都能迅速打开,这种现象就是说明apache最大连接数已经满了,新的访客只能排队等待有 ...