一文看懂websocket

咱们先看一下下面这张图： javascript

能够看到这是一个简易的聊天室，两个窗口的消息是实时发送与接收的，这个主要就是用咱们今天要讲的websocket实现的。前端

websocket是什么？

websocket是一种网络通讯协议，咱们都知道http协议，http协议只能从客户端主动发起，不能从服务端推送数据到客户端，今天咱们讲的websocket就是一种不只能从客户端发送数据到服务端，也能够主动从服务的推送数据给客户端的一种协议。咱们先看一张图：咱们能够看到，http请求是客户端发起请求，服务端响应，而后断开链接，客户端发起，服务端响应的一种循环。而websocket协议是客户端发起链接后，就会一直保持链接，期间客户端和服务端均可以向对方发送数据，直到链接关闭。 websocket其余的一些特色：java

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

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

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

（4）能够发送文本，也能够发送二进制数据。

（5）没有同源限制，客户端能够与任意服务器通讯。

（6）协议标识符是`ws`（若是加密，则为`wss`），服务器网址就是 URL。

应用场景

试想一下这样的场景，咱们须要实现一个支付成功后，向用户给一个成功的提示，那么在websocket协议没有应用以前，人们是使用一种轮询的方式。就是客户端定时向服务端发送请求，看有没有收到支付金额，没有就一直发送，收到了再中止。相似下面的代码：web

function getIsPaySuccess() {
	var timmer = setInterval(function () {
		$.ajax({
			url: '/getJayStatus',
			success: function (res) {
				if (res.status) {
					clearInterval(timmer)
				}
			},
			fail: function () {

			}
		})
	}, 1000)
}

在发送请求的工程中，浪费了大量的资源，并且响应也不是及时的，由于我是每隔1秒请求一次，并不能马上获得支付成功的状态。这时候咱们就须要用到websocket的方式了。整体来讲，websocket须要用在一些能及时响应的场景中。ajax

1. 社交订阅

有时候咱们须要及时收到订阅消息，好比说开奖通知，好比说在线邀请，支付结果等。chrome

2. 多玩家游戏

不少游戏都是协同做战的，玩家的操做和状态确定须要及时同步到全部玩家。跨域

3. 协同编辑文档

同一份文档，编辑状态得同步到全部参与的用户界面上。浏览器

4. 数据流状态

好比说上传下载文件，文件进度，文件是否上传成功。服务器

5. 多人聊天

不少场景下都须要多人参与讨论聊天，用户发送的消息得第一时间同步到全部用户。websocket

6. 股票虚拟货币价格

股票和虚拟货币的价格都是实时波动的，价格跟用户的操做息息相关，及时推送对用户跟盘有很大的帮助。

代码实现

咱们用下面一段代码来说解websocket的建立，拥有的属性，能调用的方法和能监听的事件：

// 链接状态的枚举
const readyStateMap = {
	0: '链接还没有创建',
	1: '链接已创建，能够进行通讯',
	2: '链接正在进行关闭',
	3: '链接已经关闭或者链接不能打开'
}
Object.freeze(readyStateMap)
class WsTest {
	constructor(url) {
		// 建立websocket实例，第一个参数是链接的url，没有跨域限制，第二个参数是可接受的协议
		this.ws = new WebSocket(url);
		// readyState属性，只读属性，表示链接状态
		console.log(this.ws.readyState, readyStateMap[this.ws.readyState])
		// 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，可是尚未发出的 UTF-8 文本字节数。
		console.log(this.ws.bufferedAmount)
		this.initWs()
	}
	initWs() {
		// 事件onopen,指链接成功
		this.ws.onopen = () =&gt; {
			console.log(this.ws.readyState, readyStateMap[this.ws.readyState])
			// 方法，向服务端发送消息,传输字符串
			this.ws.send(JSON.stringify({type: 'connection'}))
		};
		// 事件onmessage，指接收到服务端消息
		this.ws.onmessage = (evt) =&gt; {
			console.log(evt.data, 'data')
			const {type, msg} = JSON.parse(evt.data);
			console.log('消息类型：' + type, '用户id：' + msg)
			// 方法，关闭链接
			this.ws.close()
			console.log(this.ws.readyState, readyStateMap[this.ws.readyState])
		};
		// 事件onclose，关闭链接,也能够从服务端强制断开链接，这里能够从新发起链接
		this.ws.onclose = () =&gt; {
			console.log(this.ws.readyState, readyStateMap[this.ws.readyState])
		};
		// 事件onerror，通讯发生错误时触发
		this.ws.onerror = () =&gt; {
			console.log(this.ws.readyState, readyStateMap[this.ws.readyState])
		};
	}
}
const ws = new WsTest('ws://203.195.156.57:30002')

上面的代码都有注释，应该不难看出websocket的使用方法，这段代码能够直接放到chrome控制台运行：

兼容性

能够看到几乎全部浏览器都支持了。

总结

websocket是一个相似http的一种通信协议。
websocket最大的特色是客户端和服务端能相互给对方发送消息。
websocket普遍引用在须要实时通信的一些应用上面。
websocket没有同源限制，并且性能开销小，通讯高效。

本文主要讲了websocket协议的定义和基本用法，下一期我会结合本文开始的聊天室来实现一个具体的websocket应用。聊天室在线体验地址：地址

> 学习如逆水行舟，不进则退，前端技术飞速发展，若是天天不坚持学习，就会跟不上，我会陪着你们，天天坚持推送博文，跟你们一同进步，但愿你们能关注我，第一时间收到最新文章。

我的公众号：