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 学习笔记的更多相关文章

  1. WebSocket学习笔记IE,IOS,Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

  2. WebSocket学习笔记——无痛入门

    WebSocket学习笔记——无痛入门 标签: websocket 2014-04-09 22:05 4987人阅读 评论(1) 收藏 举报  分类: 物联网学习笔记(37)  版权声明:本文为博主原 ...

  3. WebSocket 学习笔记--IE,IOS,Android等设备的兼容性问题与代码实现

    一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏览器来实现,其中数据通信,准备使用WebSocket的方式.于是,我开始 ...

  4. Spring Boot + WebSocket 学习笔记

    首先需要了解一下背景,什么是WebSocket以及为什么要用WebSocket. 在常见的Web应用中,客户端与服务器通信,都是通过HTTP协议进行通信,客户端一次请求,服务端一次响应.而WebSoc ...

  5. WebSocket学习笔记

    参考文章链接:http://www.ruanyifeng.com/blog/2017/05/websocket.html 简单示例:https://www.yiibai.com/websocket/p ...

  6. Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例

    在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...

  7. SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序

    SpringBoot学习笔记(11):使用WebSocket构建交互式Web应用程序 快速开始 本指南将引导您完成创建“hello world”应用程序的过程,该应用程序在浏览器和服务器之间来回发送消 ...

  8. WeX5学习笔记

    目录 WeX5学习笔记... 1 1.轻松看透WeX5产品能力和技术... 1 2.WeX5可以怎么玩?... 3 一.纯本地App. 3 二.关联一个网站,希望默认就打开某页... 4 三.UI设计 ...

  9. Maven学习笔记-03-Eclipse下maven项目在Tomcat7和Jetty6中部署调试

    现在最新的Eclipse Luna Release 已经内置了Maven插件,这让我们的工作简洁了不少,只要把项目直接导入就可以,不用考虑插件什么的问题,但是导入之后的项目既可以部署在Tomcat也可 ...

随机推荐

  1. android调用第三方库——第一篇 (转载)

    转自:http://blog.csdn.net/jiuyueguang/article/details/9447245 版权声明:本文为博主原创文章,未经博主允许不得转载. 0:前言: 这两天一直在研 ...

  2. 模板 - 数学 - 快速傅里叶变换/快速数论变换(FFT/NTT)

    先看看. 通常模数常见的有998244353,1004535809,469762049,这几个的原根都是3.所求的项数还不能超过2的23次方(因为998244353的分解). 感觉没啥用. #incl ...

  3. (水题)洛谷 - P1553 - 数字反转(升级版) - 字符串格式转换

    https://www.luogu.org/problemnew/show/P1553 忘记给整数加上前导零去除的代码了.其实不去也可以,额外的进位用一个carry另外存起来就好. #include& ...

  4. 基础BFS+DFS poj3083

    //满基础的一道题 //最短路径肯定是BFS. //然后靠右,靠左,就DFS啦 //根据前一个状态推出下一个状态,举靠左的例子,如果一开始是上的话,那么他的接下来依次就是 左,上 , 右 , 下 // ...

  5. bzoj 2064: 分裂【状压dp】

    参考:https://www.cnblogs.com/liu-runda/p/6019426.html 有点神奇 大概就是显然最直观的转移是全部合起来再一个一个拆,是n+m次,然后设f[i][j]为分 ...

  6. nginx部署h5项目

    1. nginx部署h5项目 此为windows部署,liunx也类似的 1.1. 前言 部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项 ...

  7. P1226神经网络

    提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...

  8. 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 ...

  9. CentOS下查看网络状态

    查看网络状态:lsof -Pnl +M -i4 显示ipv4服务及监听端情况netstat -anp 所有监听端口及对应的进程netstat -tlnp 功能同上 网络基本命令 (1)network ...

  10. bzoj1878 [SDOI2009]HH的项链【莫队】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1878 以每个询问左端点所属的块的编号为第一关键字,右端点本身为第二关键字,排序,然后保利扫描 ...