为什么需要 WebSocket?

因为 HTTP 协议采用的是请求/响应模型。所以有一个缺陷:通信只能由客户端发起。 举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。 image.png 这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用”轮询”:每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。 轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。因此,工程师们一直在思考,有没有更好的方法。WebSocket 就是这样发明的。

webSocket简介

WebSocket 是一种网络通信协议 本质上就是tcp,实现了客户端与服务器端之间的通信 只要使用websocket实现客户端与服务器端的第一次连接,那么建立起来的连接是长期的。

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

WebSocket协议有两部分:握手和数据传输
握手是基于http协议的

image.png

webSocket特点

(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

客户端(浏览器)实现

websocket对象

创建websocket对象 var ws = new WebSocket(url);

websocket事件

事件 事件处理程序 描述
open websocket对象.onopen 连接建立时触发
message websocket对象.onmessage 客户端接收服务端数据时触发
error websocket对象.onerror 通信发生错误时触发
close websocket对象.onclose 连接关闭时触发

websocket方法

  • send() 用于给服务端发送数据

服务端的实现

搭建webSocket

初始化(实例化一个websocket)
  1. var webSocket = new webSocket('url'); //这里的url指的是线上服务器地址

建立客户端与服务器端的链接

客户端向服务器端发送数据

把服务器端返回的数据渲染在客户端界面