WebSocket 简介

webSocket建立连接的过程:
浏览器先发送http报文,借用了http协议来完成一部分握手,这个http报文中有这么一段信息"Upgrade:websocket",这是告诉服务器"你好,我要切换协议"。服务器接收后,回复一个http报文,告诉浏览器"好的,我已经切换到websocket协议了"。从这里以后就不用http报文了,接下来就完全按照websocket协议进行了。

1. 为什么需要 WebSocket

我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

答案:因为 HTTP 协议有一个缺陷:通信只能由客户端发起。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。我们只能使用"轮询":每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。

2. 简介

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

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

其他特点包括:

  • (1)建立在 TCP 协议之上,服务器端的实现比较容易。

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

  • (3)数据格式比较轻量,性能开销小,通信高效。

  • (4)可以发送文本,也可以发送二进制数据。

  • (5)没有同源限制,客户端可以与任意服务器通信。

  • (6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。

ws://example.com:80/some/path

3. 客户端的简单示例

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};     

4. 客户端的 API

4.1 WebSocket 构造函数
const ws = new WebSocket('ws://localhost:8080'); 

执行上面语句之后,客户端就会与服务器进行连接。

4.2 webSocket.readyState

readyState属性返回实例对象的当前状态,共有四种。

  • CONNECTING:值为0,表示正在连接。
  • OPEN:值为1,表示连接成功,可以通信了。
  • CLOSING:值为2,表示连接正在关闭。
  • CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

原文:http://www.ruanyifeng.com/blog/2017/05/websocket.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容