Websocket的基本使用-聊天室案例

1. 什么是websocket

WebSocket 是一种网络通信协议

2. 为什么需要websocket

Websocket 协议，是为了弥补HTTP协议【单向通信】的缺点。

详细来讲，HTTP只支持由客户端发起通信，一旦服务端的数据发生变化，是不可能主动向客户端推送消息的。

一般而言，此时都会使用【轮询 + HTTP】的解决方案，即每隔一段时间就建立一次HTTP连接，来帮助客户端追加更新。但效率非常低，非常浪费资源。

websocket 则支持服务器推送技术。

即，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，实现真正的双向平等对话。

客户端和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

3. websocket简介

websocket 特点

（1）实时通信：全双工协议，延迟更少，效率更高。

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

（3）控制开销：用于协议控制的数据包头部相对较小，数据格式比较简洁，性能开销比较小，通信高效。

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

（5）没有同源限制：可以实现客户端和服务器的任意通信。

（6）实现简单：建立在TCP协议之上，服务器端的实现比较简单。

webSocket 与 HTTP 的异同

相同点：

（1）都是基于TCP的应用层协议。

（2）都使用Request/Response模型进行连接的建立。

（3）在连接的建立过程中对错误的处理方式相同，在这个阶段WebSocket可能返回和HTTP相同的返回码。

不同点：

（1）HTTP协议基于Request/Response，只能做单向传输，是半双工通信，而WebSocket是全双工通信

 - 半双工通信：单向流动， 服务器不主动推送数据给客户端

 - 全双工通信：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

（2）http是无状态的，所以请求得到响应以后就关闭了,无状态的好处是服务器不需要存储相关会话信息。缺点是每次http请求和响应都会发送关于请求的冗余信息；而WebSocket 只需要建立一次Request/Response消息对，之后都是TCP连接，避免了需要多次建立Request/Response消息对而产生的冗余头部信息。节省了大量流量和服务器资源。

（3）WebSocket在建立握手连接时，数据是通过HTTP协议传输的，但在建立连接之后，真正的数据传输阶段是不需要HTTP协议参与的。而http需要需要三次握手。

（4）WebSocket传输的数据是二进制流，是以帧为单位的，HTTP传输的是明文传输，是字符串传输。

4. 客户端的简单应用

事件：onopen、onmessages、onclose、onerror

const ws = new Websocket("wss://echo.websocket.org");

// onopen：用于执行连接成功后的回调

ws.onopen = function(evt){

    consoel.log("==========&