JS实时通信三把斧系列之一: websocket

本文同步发表在豆米的博客：豆米的博客

前言

前端的学习路线永远不会缺少实时通信这个领域,为了给自己填充这块知识.顺便可以完成公司的长连接项目,我开始学习系统学习这块领域的知识.整个系列按照实时通信的实现方式来学习,目前能够应用在实际项目中有如下三种方式:

1. websocket: JS实时通信三把斧系列之一: websocket
2. socket.io: JS实时通信三把斧系列之一: socket.io
3. EventSource: JS实时通信三把斧系列之一: eventSource

今天第一篇文章便是介绍websocket以及对应的简单应用,整个系列文章对应的demo代码在这里: 传送门

1. websocket协议简单介绍

在这里不打算详细介绍整个协议的内容.根据以前协议的学习思路,我挑重点使用问答方式来介绍该协议.

1.1. 协议运行在OSI的哪层?

应用层，WebSocket协议是一个独立的基于TCP的协议。 它与HTTP唯一的关系是它的握手是由HTTP服务器解释为一个Upgrade请求

1.2. 协议运行的标准端口号是多少?

默认情况下，WebSocket协议使用端口80用于常规的WebSocket连接和端口443用于WebSocket连接的在传输层安全（TLS）RFC2818之上的隧道化口

1.3. 协议是如何工作的?

协议的工作流程可以参考下图：

image

3. [websocket.Receiver实例]

因为这个Receiver实例实在太大，所以截成两张图片：

image

第二张图片是：

image

Note: 针对上面的流程图有几个点需要说下

1. nodejs提供了upgrade事件： https://nodejs.org/api/http.html#http_event_upgrade
2. websocket.Server实例会在收到ws报文之后实例化一个websocket实例，从而跳到第二张图片
3. websocket.Websocket实例会在建立的socket上监听到data事件之后跳到第三张和第四张图片也就是Receiver实例，并在Receiver实例中处理掉数据

3. websocket在nodejs端的应用

demo代码如下： ws.js

我们在命令行中执行：

node ws.js

之后打开wireshark，可以看到浏览器和服务端的通信过程

1. 客户端发送握手请求

image

2. 服务端响应握手成功

image

3. chrome浏览器显示的请求

image

4. 客户端发送数据，不带mask

image

5. 客户端发送数据，带mask

image

6. 客户端关闭连接-不带mask

image

7. 客户端关闭连接-mask

image

Note: chrome实现的原生websocket客户端不支持发送ping/pong包来维持心跳

兼容性

下一篇文章： JS实时通信三把斧系列之一: socket.io

参考

1. https://chenjianlong.gitbooks.io/rfc-6455-websocket-protocol-in-chinese/content/section7/section7.html
2. http://tools.ietf.org/html/rfc6455
3. https://github.com/websockets/ws/blob/master/doc/ws.md
4. https://juejin.im/entry/5a5c559c518825734859ee5e