今天我们来聊一聊WebSocket（iOS/Golang）

前言：
前段时间，在公司的项目中用到了WebSocket，当时没有时间好好整理。
最近，趁着有时间，就好好梳理了一下WebSocket的相关知识。

本篇将介绍以下内容：
1、什么是WebSocket？
2、WebSocket使用场景
3、WebSocket底层原理（协议）
4、iOS中WebSocket的相关框架
5、使用Starscream（Swift）完成长链需求（ 客户端 ）
6、使用Golang完成长链需求（ 服务端 ）

一、什么是 WebSocket ？

WebSocket = “HTTP/1.1协议握手” + TCP的“全双工“通信 的网络协议。

主要过程：

  • 首先，通过 HTTP/1.1 协议的101状态码进行握手。
  • 其次，再通过TCP实现浏览器与服务器全双工(full-duplex)通信。（通过不断发ping包、pong包保持心跳）

最终，使得 “服务端” 拥有 “主动” 发消息给 “客户端” 的能力。

这里有几个重点：

  1. WebSocket是基于TCP的上部应用层网络协议。
  2. 它依赖于HTTP/1.1 协议的101状态码进行握手 + 之后的TCP双向通信。

二、WebSocket 应用场景

1. IM（即时通讯）

典型例子：微信、QQ等
当然，用户量如果非常大的话，仅仅依靠WebSocket肯定是不够的，各大厂应该也有自己的一些优化的方案与措施。但对于用户量不是很大的即时通讯需求，使用WebSocket是一种不错的方案。

2. 游戏（多人对战）

典型例子：王者荣耀等（应该都玩过）

3. 协同编辑（共享文档）

多人同时编辑同一份文档时，可以实时看到对方的操作。
这时，就用上了WebSocket。

4. 直播/视频聊天

对音频/视频需要较高的实时性。

5. 股票/基金等金融交易平台

对于股票/基金的交易来说，每一秒的价格可能都会发生变化。

6. IoT（物联网 / 智能家居）

例如，我们的App需要实时的获取智能设备的数据与状态。
这时，就需要用到WebSocket。

......
等等等等

只要是一些对 “实时性” 要求比较高的需求，可能就会用到WebSocket。

三、WebSocket 底层原理

WebSocket是一个网络上的应用层协议，它依赖于HTTP/1.1 协议的101状态码进行握手，握手成功后，数据就通过TCP/IP协议传输了。

WebSocket分为握手阶段和数据传输阶段，即进行了HTTP/1.1 协议的101状态码进行握手 + 双工的TCP连接。

1、握手阶段

首先，客户端发送消息：（本例是：用Golang编写的本地服务）

GET /chat HTTP/1.1
Host: 127.0.0.1:8000
Origin: ws://127.0.0.1:8000
Qi-WebSocket-Version: 0.0.1
Sec-WebSocket-Version: 13
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: aGFjb2hlYW9rd2JtdmV5eA==

然后，服务端返回消息：（本例是：用swift编写的客户端接收）

"Upgrade": "websocket", 
"Connection": "Upgrade", 
"Sec-WebSocket-Accept": "NO+pj7z0cvnNj//mlwRuAnCYqCE="

这里值得注意的是Sec-WebSocket-Accept的计算方法：
base64(sha1(sec-websocket-key + 258EAFA5-E914-47DA-95CA-C5AB0DC85B11))

  • 如果这个Sec-WebSocket-Accept计算错误，浏览器会提示：Sec-WebSocket-Accept dismatch；
  • 如果返回成功，Websocket就会回调onopen事件

2、传输阶段

WebSocket是以 frame 的形式传输数据的。
比如会将一条消息分为几个frame，按照先后顺序传输出去。

这样做会有几个好处：

  • 较大的数据可以分片传输，不用考虑到数据大小导致的长度标志位不足够的情况。
  • 和HTTP的chunk一样，可以边生成数据边传递消息，即提高传输效率。

WebSocket传输过程使用的报文，如下所示：

 0                   1                   2                   3
 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
 +-+-+-+-+-------+-+-------------+-------------------------------+
 |F|R|R|R| opcode|M| Payload len |    Extended payload length    |
 |I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
 |N|V|V|V|       |S|             |   (if payload len==126/127)   |
 | |1|2|3|       |K|             |                               |
 +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
 |     Extended payload length continued, if payload len == 127  |
 + - - - - - - - - - - - - - - - +-------------------------------+
 |                               |Masking-key, if MASK set to 1  |
 +-------------------------------+-------------------------------+
 | Masking-key (continued)       |          Payload Data         |
 +-------------------------------- - - - - - - - - - - - - - - - +
 :                     Payload Data continued ...                :
 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
 |                     Payload Data continued ...                |
 +---------------------------------------------------------------+

具体的参数说明如下：

  • FIN（1 bit）：
    表示信息的最后一帧，flag，也就是标记符。
    PS：当然第一个消息片断也可能是最后的一个消息片断；

  • RSV1、RSV2、RSV3（均为1 bit）：
    默认均为0。如果有约定自定义协议则不为0，一般均为0。（协议扩展用）

  • Opcode（4 bit）：
    定义有效负载数据，如果收到了一个未知的操作码，连接也必须断掉，以下是定义的操作码：

操作码 含义
%x0 连续消息片断
%x1 文本消息片断
%x2 二进制消息片断
%x3-7 （预留位）为将来的非控制消息片断保留的操作码。
%x8 连接关闭
%x9 心跳检查ping
%xA 心跳检查pong
%xB-F （预留位）为将来的控制消息片断的保留操作码。

  • Mask（1 bit）：
    是否传输数据添加掩码。
    若为1，掩码必须放在masking-key区域。（后面会提到..）
    注：客户端给服务端发消息Mask值均为1。

  • Payload length：
    Payload字段用来存储传输数据的长度。

本身Payload报文字段的大小可能有三种情况：7 bit、7+16 bit、7+64 bit。

第一种：7 bit，表示从0000000 ~ 1111101（即0~125），表示当前数据的length大小（较小数据，最大长度为125）。

第二种：(7+16) bit：前7位为1111110（即126），126代表后面会跟着2个字节无符号数，用来存储数据length大小（长度最小126，最大为65 535）。

第三种：(7+64) bit：前7位为1111111（即127），127代表后面会跟着8个字节无符号数，用来存储数据length大小（长度最小为65536，最大为2^16-1）。

Payload报文长度 所传输的数据大小区间
7 bit [ 0, 125]
7 +16 bit [ 126 , 65535]
7 + 64 bit [ 65536, 2^16 -1]

说明：
传输数据的长度，以字节的形式表示：7位、7+16位、或者7+64位。
1）如果这个值以字节表示是0-125这个范围，那这个值就表示传输数据的长度；
2）如果这个值是126，则随后的2个字节表示的是一个16进制无符号数，用来表示传输数据的长度；
3）如果这个值是127，则随后的是8个字节表示的一个64位无符号数，这个数用来表示传输数据的长度。

  • Masking-key（0 bit / 4 bit）：
    0 bit：说明mask值不为1，无掩码。
    4 bit：说明mask值为1，添加掩码。

PS：客户端发送给服务端数据时，mask均为1。
同时，Masking-key会存储一个32位的掩码。

  • Payload data（x+y byte）：
    负载数据为扩展数据及应用数据长度之和。

  • Extension data（x byte）：
    如果客户端与服务端之间没有特殊约定，那么扩展数据的长度始终为0，任何的扩展都必须指定扩展数据的长度，或者长度的计算方式，以及在握手时如何确定正确的握手方式。如果存在扩展数据，则扩展数据就会包括在负载数据的长度之内。

  • Application data（y byte）：
    任意的应用数据，放在扩展数据之后。
    应用数据的长度 = 负载数据的长度 - 扩展数据的长度
    即：Application data = Payload data - Extension data

四、iOS 中 WebSocket 相关框架

WebSocket（iOS客户端）：
Socket（iOS客户端）：

五、使用Starscream（swift）完成客户端长链需求

首先附上Starscream：GitHub地址

第一步：将Starsream导入到项目。

打开Podfile，加上：

pod 'Starscream', '~> 4.0.0'

接着pod install。

第二步：实现WebSocket能力。

  • 导入头文件，import Starscream

  • 初始化WebSocket，把一些请求头包装一下（与服务端对好）

private func initWebSocket() {
    // 包装请求头
    var request = URLRequest(url: URL(string: "ws://127.0.0.1:8000/chat")!)
    request.timeoutInterval = 5 // Sets the timeout for the connection
    request.setValue("some message", forHTTPHeaderField: "Qi-WebSocket-Header")
    request.setValue("some message", forHTTPHeaderField: "Qi-WebSocket-Protocol")
    request.setValue("0.0.1", forHTTPHeaderField: "Qi-WebSocket-Version")
    request.setValue("some message", forHTTPHeaderField: "Qi-WebSocket-Protocol-2")
    socketManager = WebSocket(request: request)
    socketManager?.delegate = self
}

同时，我用三个Button的点击事件，分别模拟了connect（连接）、write（通信）、disconnect（断开）。

    // Mark - Actions
    // 连接
    @objc func connetButtonClicked() {
        socketManager?.connect()
    }
    // 通信
    @objc func sendButtonClicked() {
        socketManager?.write(string: "some message.")
    }
    // 断开
    @objc func closeButtonCliked() {
        socketManager?.disconnect()
    }

第三步：实现WebSocket回调方法（接收服务端消息）

遵守并实现WebSocketDelegate。

extension ViewController: WebSocketDelegate {
    // 通信（与服务端协商好）
    func didReceive(event: WebSocketEvent, client: WebSocket) {
        switch event {
        case .connected(let headers):
            isConnected = true
            print("websocket is connected: \(headers)")
        case .disconnected(let reason, let code):
            isConnected = false
            print("websocket is disconnected: \(reason) with code: \(code)")
        case .text(let string):
            print("Received text: \(string)")
        case .binary(let data):
            print("Received data: \(data.count)")
        case .ping(_):
            break
        case .pong(_):
            break
        case .viablityChanged(_):
            break
        case .reconnectSuggested(_):
            break
        case .cancelled:
            isConnected = false
        case .error(let error):
            isConnected = false
            // ...处理异常错误
            print("Received data: \(String(describing: error))")
        }
    }
}

分别对应的是：

public enum WebSocketEvent {
    case connected([String: String])  //!< 连接成功
    case disconnected(String, UInt16) //!< 连接断开
    case text(String)                 //!< string通信
    case binary(Data)                 //!< data通信
    case pong(Data?)                  //!< 处理pong包（保活）
    case ping(Data?)                  //!< 处理ping包（保活）
    case error(Error?)                //!< 错误
    case viablityChanged(Bool)        //!< 可行性改变
    case reconnectSuggested(Bool)     //!< 重新连接
    case cancelled                    //!< 已取消
}

这样一个简单的客户端WebSocket demo就算完成了。

  • 客户端成功，日志截图：
image

六、使用Golang完成简单服务端长链需求

仅仅有客户端也无法验证WebSocket的能力。
因此，接下来我们用Golang简单做一个本地的服务端WebSocket服务。

PS：最近，正好在学习Golang，参考了一些大神的作品。

直接上代码了：

package main

import (
    "crypto/sha1"
    "encoding/base64"
    "errors"
    "io"
    "log"
    "net"
    "strings"
)

func main() {
    ln, err := net.Listen("tcp", ":8000")
    if err != nil {
        log.Panic(err)
    }
    for {
        log.Println("wss")
        conn, err := ln.Accept()
        if err != nil {
            log.Println("Accept err:", err)
        }
        for {
            handleConnection(conn)
        }
    }
}

func handleConnection(conn net.Conn) {
    content := make([]byte, 1024)
    _, err := conn.Read(content)
    log.Println(string(content))
    if err != nil {
        log.Println(err)
    }
    isHttp := false
    // 先暂时这么判断
    if string(content[0:3]) == "GET" {
        isHttp = true
    }
    log.Println("isHttp:", isHttp)
    if isHttp {
        headers := parseHandshake(string(content))
        log.Println("headers", headers)
        secWebsocketKey := headers["Sec-WebSocket-Key"]
        // NOTE：这里省略其他的验证
        guid := "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
        // 计算Sec-WebSocket-Accept
        h := sha1.New()
        log.Println("accept raw:", secWebsocketKey+guid)
        io.WriteString(h, secWebsocketKey+guid)
        accept := make([]byte, 28)
        base64.StdEncoding.Encode(accept, h.Sum(nil))
        log.Println(string(accept))
        response := "HTTP/1.1 101 Switching Protocols\r\n"
        response = response + "Sec-WebSocket-Accept: " + string(accept) + "\r\n"
        response = response + "Connection: Upgrade\r\n"
        response = response + "Upgrade: websocket\r\n\r\n"
        log.Println("response:", response)
        if lenth, err := conn.Write([]byte(response)); err != nil {
            log.Println(err)
        } else {
            log.Println("send len:", lenth)
        }
        wssocket := NewWsSocket(conn)
        for {
            data, err := wssocket.ReadIframe()
            if err != nil {
                log.Println("readIframe err:", err)
            }
            log.Println("read data:", string(data))
            err = wssocket.SendIframe([]byte("good"))
            if err != nil {
                log.Println("sendIframe err:", err)
            }
            log.Println("send data")
        }
    } else {
        log.Println(string(content))
        // 直接读取
    }
}

type WsSocket struct {
    MaskingKey []byte
    Conn       net.Conn
}

func NewWsSocket(conn net.Conn) *WsSocket {
    return &WsSocket{Conn: conn}
}

func (this *WsSocket) SendIframe(data []byte) error {
    // 这里只处理data长度<125的
    if len(data) >= 125 {
        return errors.New("send iframe data error")
    }
    lenth := len(data)
    maskedData := make([]byte, lenth)
    for i := 0; i < lenth; i++ {
        if this.MaskingKey != nil {
            maskedData[i] = data[i] ^ this.MaskingKey[i%4]
        } else {
            maskedData[i] = data[i]
        }
    }
    this.Conn.Write([]byte{0x81})
    var payLenByte byte
    if this.MaskingKey != nil && len(this.MaskingKey) != 4 {
        payLenByte = byte(0x80) | byte(lenth)
        this.Conn.Write([]byte{payLenByte})
        this.Conn.Write(this.MaskingKey)
    } else {
        payLenByte = byte(0x00) | byte(lenth)
        this.Conn.Write([]byte{payLenByte})
    }
    this.Conn.Write(data)
    return nil
}

func (this *WsSocket) ReadIframe() (data []byte, err error) {
    err = nil
    //第一个字节：FIN + RSV1-3 + OPCODE
    opcodeByte := make([]byte, 1)
    this.Conn.Read(opcodeByte)
    FIN := opcodeByte[0] >> 7
    RSV1 := opcodeByte[0] >> 6 & 1
    RSV2 := opcodeByte[0] >> 5 & 1
    RSV3 := opcodeByte[0] >> 4 & 1
    OPCODE := opcodeByte[0] & 15
    log.Println(RSV1, RSV2, RSV3, OPCODE)

    payloadLenByte := make([]byte, 1)
    this.Conn.Read(payloadLenByte)
    payloadLen := int(payloadLenByte[0] & 0x7F)
    mask := payloadLenByte[0] >> 7
    if payloadLen == 127 {
        extendedByte := make([]byte, 8)
        this.Conn.Read(extendedByte)
    }
    maskingByte := make([]byte, 4)
    if mask == 1 {
        this.Conn.Read(maskingByte)
        this.MaskingKey = maskingByte
    }

    payloadDataByte := make([]byte, payloadLen)
    this.Conn.Read(payloadDataByte)
    log.Println("data:", payloadDataByte)
    dataByte := make([]byte, payloadLen)
    for i := 0; i < payloadLen; i++ {
        if mask == 1 {
            dataByte[i] = payloadDataByte[i] ^ maskingByte[i%4]
        } else {
            dataByte[i] = payloadDataByte[i]
        }
    }
    if FIN == 1 {
        data = dataByte
        return
    }
    nextData, err := this.ReadIframe()
    if err != nil {
        return
    }
    data = append(data, nextData...)
    return
}

func parseHandshake(content string) map[string]string {
    headers := make(map[string]string, 10)
    lines := strings.Split(content, "\r\n")
    for _, line := range lines {
        if len(line) >= 0 {
            words := strings.Split(line, ":")
            if len(words) == 2 {
                headers[strings.Trim(words[0], " ")] = strings.Trim(words[1], " ")
            }
        }
    }
    return headers
}

完成后，在本地执行：

go run WebSocket_demo.go

即可开启本地服务。

这时候访问ws://127.0.0.1:8000/chat接口，即可调用长链服务。

  • 服务端，成功日志截图：
image

相关参考链接：
《微信,QQ这类IM app怎么做——谈谈Websocket》（冰霜大佬）
《WebSocket的实现原理》

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容

  • WebSocket
    WebSocket 机制 WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更...
    勇敢的_心_阅读 2,243评论 0赞 4
  • websocket
    1 述 WebSocket是一种网络通信协议WebSocket 协议在2008年诞生，2011年成为国际标准。HT...
    凯玲之恋阅读 670评论 0赞 0
  • JS实时通信三把斧系列之一: websocket
    本文同步发表在豆米的博客：豆米的博客 前言 前端的学习路线永远不会缺少实时通信这个领域,为了给自己填充这块知识.顺...
    小兀666阅读 2,511评论 1赞 8
  • WebSocket原理及和HTTP的关系
    一、WebSocket 是什么？WebSocket是HTML5中的协议。HTML5 Web Sockets规范定义...
    何向宇阅读 2,471评论 0赞 12
  • 乙巳
    《三命通会》论乙巳日的命理 【乙巳】：上等日柱，孤鸾煞，但恐有些人不利婚姻。乙木向阳，英华外发，主人聪明，但泄气，...
    人生若茶甘苦一念阅读 30,493评论 0赞 0