Workerman如何在WebSocket响应中添加Header

最近在用 Workerman 学习 WebSocket 的时候，遇到了一个问题：

结果浏览器报了这个错：

查阅了 RFC文档 得知问题在于新建WebSocket时的第二个参数，表示客户端接受的子协议。

子协议是什么？比如浏览器向服务端发起两个WebSocket连接，一条连接使用明文传输数据，另一条使用加密传输数据。

服务端可以开启两个端口分别处理明文和加密连接。也可以只开一个端口，通过客户端提供的子协议来判断该连接传输数据的方式。

那么新建WebSocket时的子协议参数，最终是以什么形式发送到服务端的？就藏在请求Header的 Sec-Websocket-Protocol 中：

服务端接收到 Sec-Websocket-Protocol 后，必须在响应 Header 中也包含 Sec-Websocket-Protocol ，取值和客户端传来的一样。否则浏览器就会报错： Error during WebSocket handshake: Sent non-empty 'Sec-WebSocket-Protocol' header but no response was receive

再提一点，子协议参数可以是个数组，比如：

表示该WebSocket连接既接收字符格式的数据，也可以接收JSON格式的数据，这时服务端必须在两者中选择其一返回给浏览器。

有点扯远了，今天的主角是 Workerman。Workerman 要获得子协议参数，需要在 onConnect 回调中设置 onWebSocketConnect 回调：

然后通过 $_SERVER['HTTP_SEC_WEBSOCKET_PROTOCOL'] 获得浏览器发来的子协议参数，是个字符串。如果浏览器接受多个子协议，那么协议之间会以 逗号 分隔。方便起见，例子中总是返回第一种子协议。

服务端响应时，将 Sec-Websocket-Protocol 字段放入 $connection->headers 数组中，这样就完成了子协议的协商。

登录192.168.1.64，设置新密码；在【配置】-【网络】-【基本配置】可设置摄像头IP地址等；在【配置】-【系统】-【系统配置】-【时间配置】可设置校时；在【配置】-【系统】-【用户管理】可管理登录用户；在【配置】-【图像】-【OSD配置】可设置时间制式等。具体介绍如下：

1、将摄像头用网线连接电脑，再将电脑IP地址设置成192.168.1.x，(x可以是除64以外的数字)，打开浏览器，输入192.168.1.64；

2、安防次登录摄像头时，用户名和密码均为admin，d出密码设置提示，设置一个新的登录密码，以后登录也是用这个新密码；

3、在视频预览界面，单击【配置】-【网络】-【基本配置】，可以对摄像头进行IP地址、网关和子网掩码进行设置；

4、在【配置】-【系统】-【系统配置】-【时间配置】里面，可以选择手动校时、或者是NTP服务器校时；

5、在【配置】-【系统】-【用户管理】里面，可以对登录用户进行管理，增加或删除用户；

6、在【配置】-【图像】-【OSD配置】里面，可以设置摄像头名称，设置时间制式，日期格式。

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

Cocos2d-x引擎集成libwebsockets，并在libwebsockets的客户端API基础上封装了一层易用的接口，使得引擎在C++, JS, Lua层都能方便的使用WebSocket来进行游戏网络通讯。

引擎支持最新的WebSocket Version 13。

在C++中使用

详细代码可参考引擎目录下的/samples/Cpp/TestCpp/Classes/ExtensionsTest/NetworkTest/WebSocketTest.cpp文件。

头文件中的准备工作

首先需要include WebSocket的头文件。

#include "network/WebSocket.h"

cocos2d::network::WebSocket::Delegate定义了使用WebScocket需要监听的回调通知接口。使用WebSocket的类，需要public继承这个Delegate。

class WebSocketTestLayer : public cocos2d::Layer, public cocos2d::network::WebSocket::Delegate

并Override下面的4个接口：

virtual void onOpen(cocos2d::network::WebSocket* ws)

virtual void onMessage(cocos2d::network::WebSocket* ws, const cocos2d::network::WebSocket::Data&data)

virtual void onClose(cocos2d::network::WebSocket* ws)

virtual void onError(cocos2d::network::WebSocket* ws, const cocos2d::network::WebSocket::ErrorCode&error)

后面我们再详细介绍每个回调接口的含义。

新建WebSocket并初始化

WebSocket.org 提供了一个专门用来测试WebSocket的服务器"ws://echo.websocket.org"。 测试代码以链接这个服务器为例，展示如何在Cocos2d-x中使用WebSocket。

新建一个WebSocket：

cocos2d::network::WebSocket* _wsiSendText = new network::WebSocket()

init第一个参数是delegate，设置为this，第二个参数是服务器地址。 URL中的"ws://"标识是WebSocket协议，加密的WebSocket为"wss://".

_wsiSendText->init(*this, "ws://echo.websocket.org")

WebSocket消息监听

在调用send发送消息之前，先来看下4个消息回调。

onOpen

init会触发WebSocket链接服务器，如果成功，WebSocket就会调用onOpen，告诉调用者，客户端到服务器的通讯链路已经成功建立，可以收发消息了。

void WebSocketTestLayer::onOpen(network::WebSocket* ws)

{

if (ws == _wsiSendText)

{

_sendTextStatus->setString("Send Text WS was opened.")

}

}

onMessage

network::WebSocket::Data对象存储客户端接收到的数据， isBinary属性用来判断数据是二进制还是文本，len说明数据长度，bytes指向数据。

void WebSocketTestLayer::onMessage(network::WebSocket* ws, const network::WebSocket::Data&data)

{

if (!data.isBinary)

{

_sendTextTimes++

char times[100] = {0}

sprintf(times, "%d", _sendTextTimes)

std::string textStr = std::string("response text msg: ")+data.bytes+", "+times

log("%s", textStr.c_str())

_sendTextStatus->setString(textStr.c_str())

}

}

onClose

不管是服务器主动还是被动关闭了WebSocket，客户端将收到这个请求后，需要释放WebSocket内存，并养成良好的习惯：置空指针。

void WebSocketTestLayer::onClose(network::WebSocket* ws)

{

if (ws == _wsiSendText)

{

_wsiSendText = NULL

}

CC_SAFE_DELETE(ws)

}

onError

客户端发送的请求，如果发生错误，就会收到onError消息，游戏针对不同的错误码，做出相应的处理。

void WebSocketTestLayer::onError(network::WebSocket* ws, const network::WebSocket::ErrorCode&error)

{

log("Error was fired, error code: %d", error)

if (ws == _wsiSendText)

{

char buf[100] = {0}

sprintf(buf, "an error was fired, code: %d", error)

_sendTextStatus->setString(buf)

}

}

send消息到服务器

在init之后，我们就可以调用send接口，往服务器发送数据请求。send有文本和二进制两中模式。

发送文本

_wsiSendText->send("Hello WebSocket, I'm a text message.")

发送二进制数据(多了一个len参数)

_wsiSendBinary->send((unsigned char*)buf, sizeof(buf))

主动关闭WebSocket

这是让整个流程变得完整的关键步骤, 当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接。close会触发onClose消息，而后onClose里面，我们释放内存。

_wsiSendText->close()

在Lua中使用

详细代码可参考引擎目录下的/samples/Lua/TestLua/Resources/luaScript/ExtensionTest/WebProxyTest.lua文件。

创建WebSocket对象

脚本接口相对C++要简单很多，没有头文件，创建WebSocket对象使用下面的一行代码搞定。 参数是服务器地址。

wsSendText = WebSocket:create("ws://echo.websocket.org")

定义并注册消息回调函数

回调函数是普通的Lua function，4个消息回调和c++的用途一致，参考上面的说明。

local function wsSendTextOpen(strData)

sendTextStatus:setString("Send Text WS was opened.")

end

local function wsSendTextMessage(strData)

receiveTextTimes= receiveTextTimes + 1

local strInfo= "response text msg: "..strData..", "..receiveTextTimes

sendTextStatus:setString(strInfo)

end

local function wsSendTextClose(strData)

print("_wsiSendText websocket instance closed.")

sendTextStatus = nil

wsSendText = nil

end

local function wsSendTextError(strData)

print("sendText Error was fired")

end

Lua的消息注册不同于C++的继承 &Override，有单独的接口registerScriptHandler。 registerScriptHandler第一个参数是回调函数名，第二个参数是回调类型。 每一个WebSocket实例都需要绑定一次。

if nil ~= wsSendText then

wsSendText:registerScriptHandler(wsSendTextOpen,cc.WEBSOCKET_OPEN)

wsSendText:registerScriptHandler(wsSendTextMessage,cc.WEBSOCKET_MESSAGE)

wsSendText:registerScriptHandler(wsSendTextClose,cc.WEBSOCKET_CLOSE)

wsSendText:registerScriptHandler(wsSendTextError,cc.WEBSOCKET_ERROR)

end

send消息

Lua中发送不区分文本或二进制模式，均使用下面的接口。

wsSendText:sendString("Hello WebSocket中文, I'm a text message.")

主动关闭WebSocket

当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接，以释放服务器和客户端的资源。close会触发cc.WEBSOCKET_CLOSE消息。

wsSendText:close()

在JSB中使用

详细代码可参考引擎目录下的/samples/Javascript/Shared/tests/ExtensionsTest/NetworkTest/WebSocketTest.js文件。

创建WebSocket对象

脚本接口相对C++要简单很多，没有头文件，创建WebSocket对象使用下面的一行代码搞定。 参数是服务器地址。

this._wsiSendText = new WebSocket("ws://echo.websocket.org")

设置消息回调函数

JSB中的回调函数是WebSocket实例的属性，使用匿名函数直接赋值给对应属性。可以看出JS语言的特性，让绑定回调函数更加优美。四个回调的含义，参考上面c++的描述。

this._wsiSendText.onopen = function(evt) {

self._sendTextStatus.setString("Send Text WS was opened.")

}

this._wsiSendText.onmessage = function(evt) {

self._sendTextTimes++

var textStr = "response text msg: "+evt.data+", "+self._sendTextTimes

cc.log(textStr)

self._sendTextStatus.setString(textStr)

}

this._wsiSendText.onerror = function(evt) {

cc.log("sendText Error was fired")

}

this._wsiSendText.onclose = function(evt) {

cc.log("_wsiSendText websocket instance closed.")

self._wsiSendText = null

}

send消息

发送文本，无需转换，代码如下：

this._wsiSendText.send("Hello WebSocket中文, I'm a text message.")

发送二进制，测试代码中，使用_stringConvertToArray函数来转换string为二进制数据，模拟二进制的发送。 new Uint16Array创建一个16位无符号整数值的类型化数组，内容将初始化为0。然后，循环读取字符串的每一个字符的Unicode编码，并存入Uint16Array，最终得到一个二进制对象。

_stringConvertToArray:function (strData) {

if (!strData)

returnnull

var arrData = new Uint16Array(strData.length)

for (var i = 0i <strData.lengthi++) {

arrData[i] = strData.charCodeAt(i)

}

return arrData

},

send二进制接口和send文本没有区别，区别在于传入的对象，JS内部自己知道对象是文本还是二进制数据，然后做不同的处理。

var buf = "Hello WebSocket中文,\0 I'm\0 a\0 binary\0 message\0."

var binary = this._stringConvertToArray(buf)

this._wsiSendBinary.send(binary.buffer)

主动关闭WebSocket

当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接，以释放服务器和客户端的资源。close会触发onclose消息。

onExit: function() {

if (this._wsiSendText)

this._wsiSendText.close()

}

---