WebSocket 即时通讯

Websocket之前获取后端数据需要前端主动发起请求，后端相应后获取最新数据，如果需要实时获取前端需要轮询（即浏览器通过js启动一个定时器，每隔一段时间发送一次请求）来获取服务器最新信息，轮询效率非常低，需要保持长连接，实时性不够，频繁操作带来的服务器压力，websocket是解决这个通讯痛点而生。

webSocket 是HTML5新增的一种网络通信协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道(全双工通讯)，在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送，服务器可以在任意时刻发送消息给浏览器。

示例图

最大特点：服务器可以主动向客户端推送信息, 客户端也可以主动向服务器发送信息, 真正的双向平等对话，属于服务器推送技术的一种。

websocket 特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符ws 如果加密 wss，服务器网址即是URL地址

websocket 语法

let ws = new WebSocket(url, [protocol]);

第一个参数url，指定连接URL必传，第二个参数可选，指定可接受的子协议

websocket 事件和方法

1.新建websocket构造函数

let ws = new WebSocket('ws://localhost:8080');

创建后客户端就会和服务器进行连接

2.websocket 4种状态

（1） connecting(连接) 值为0 表示正在连接

（2） open 值为1 表示连接成功，可以正常通讯了

（3） closing 值为2 表示连接正在关闭

（4） closed 值为3 表示连接已经关闭，或者打开连接失败

webSocket.bufferedAmount

实例对象的bufferedAmount属性，表示还有多少字节的二进制数据没有发送出去,用来判断发送是否结束。

let data = new ArrayBuffer(10000000);

socket.send(data);

if (socket.bufferedAmount === 0) {

// 发送完毕

} else {

// 发送还没结束

}

webSocket.onerror 实例对象的onerror属性，用于指定报错时的回调函数。

socket.onerror = function(event) {

// handle error event

};

socket.addEventListener("error", function(event) {

// handle error event

});

WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

WebSocket 即时通讯相关推荐

java SSM 框架多数据源代码生成器 websocket即时通讯 shiro redis 后台框架源码
A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0个代码不用写,生 ...
java代码编辑器 pdf文件预览主流SSM 代码生成器 shrio redis websocket即时通讯
获取[下载地址] QQ: 313596790 官网 http://www.fhadmin.org/ A 代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [ ...
代码生成器 websocket即时通讯 shiro redis 后台框架源码
获取[下载地址] QQ: 313596790 A 调用摄像头拍照,自定义裁剪编辑头像,头像图片色度调节 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,快速开发利器)+快速表单构建器 ...
php实现websocket即时通讯
php实现websocket即时通讯系统环境环境配置概述 websocket原理 php服务端 web客户端开启Socket服务器程序系统环境 centos 7 php5.6 环境配置 ph ...
使用tomcat方式实现websocket即时通讯服务端讲解
使用tomcat方式实现websocket即时通讯服务端讲解第一种方案:使用Tomcat的方式实现 tomcat版本要求:tomcat7.0+.需要支持Javaee7 导入javeee-api的ja ...
[开源] .NETCore websocket 即时通讯组件---ImCore
ImCore 利用 webSocket 协议实现简易.高性能.集群即时通讯组件,支持点对点通讯.群聊通讯.上线下线事件消息等众多实用性功能. Quick Start dotnet add packag ...
HTML5+NodeJs实现WebSocket即时通讯
转自:https://www.cnblogs.com/axes/p/3586132.html 最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有W ...
SpringBoot开发网页即时聊天室/IM通信/WebSocket/即时通讯
现在的java开发基本都是基于springboot,所以我们就基于springboot2环境. 效果展示(基于网页浏览器的,不是桌面程序) 通讯协议: 现在的主流浏览器基本都支持html5标准,所以我 ...
前端实现WebSocket即时通讯
要实现客户端与服务器端的通信,最常接触的是http(https)协议,http通信只能是客户端发起请求,服务器响应.服务器不能主动向客户端传递消息. HTTP 协议无法做到服务器主动向客户端推送信息, ...
NodeJs 实现 WebSocket 即时通讯（简单版）
服务端代码 var ws = require("nodejs-websocket"); console.log("开始建立连接...")var game1 = ...

WebSocket 即时通讯

WebSocket 即时通讯相关推荐

最新文章

热门文章