websocket添加请求头(websocket 头信息)

在浏览器与服务器通信间，传统的 HTTP 请求在某些场景下并不理想，比如实时聊天、实时性的小游戏等等， 其面临主要两个缺点：其基于 HTTP 的主要解决方案有：可以看到，基于 HTTP 协议的方案都包含一个本质缺陷 —— 「被动性」，服务端无法下推消息，仅能由客户端发起请求不断询问是否有新的消息，同时对于客户端与服务端都存在性能消耗。WebSocket 是 HTML5 中提出的新的网络协议标准，其包含几个特点：在浏览器中使用 Websocket 非常简单，在支持 Websocket 的浏览器中会提供了原生的 WebSocekt 对象，其中对于消息的接收与数据帧处理在浏览器中已经封装好了。以下将用一个简单的例子解释如何使用 WebSocekt；浏览器中提供了原生类 WebSocket ，使用 new 关键字实例化它：接收两个参数：WebSocket 类提供了一些常量表示连接状态：实例化对象中可以监听到以下事件：首先触发 open 事件，之后每次发送数据服务端都会回复数据，因此触发了 message 事件，如果触发 close 事件；这里最后一次发送之后未收到服务端回复也是因为客户端立即断开了连接；websocket.send()是发送信息方法对 WebSocket 实例监听事件有两种方式，这里以 message 事件为例：在 message 回调函数中得到 MessageEvent 类型参数 e ，我们需要的数据可以通过 e.data 获取；需要注意的一点是：不论服务端与客户端，其接受到的数据都是序列化后的字符串（当然也有 ArrayBuffer|Blob 类型数据），很多时候我们需要解析处理数据，比如JSON.parse(e.data) ；由于网络环境复杂，某些情况会出现断开连接或者连接出错，需要我们在 close 或者 error 事件中监听非正常断开并重连；由于一些原因在 error 时浏览器并不会响应回调事件，因此稳妥的做法还需要在 open 之后开启一个定时任务去判断当前的连接状态 readyState ，在出现异常情况下尝试重连；websocket规范定义了心跳机制，一方可以通过发送ping（opcode 0x9）消息给另一方，另一方收到ping后应该尽可能快的返回pong（0xA）。心跳机制是用于检测连接的对方在线状态，因此如果没有心跳，那么无法判断一方还在连接状态中，一些网络层比如 nginx 或者浏览器层会主动断开连接，在 JavaScript 中，WebSocket 并没有开放 ping/pong 的 API ，虽然浏览器自带了心跳处理，然而不同厂商的实现也不尽相同，因此需要在我们开发时候与服务端约定好一个自实现的心跳机制；比如浏览器中，检测到 open 事件后，启动一个定时任务，每次发送数据 0x9 给服务端，而服务端返回 0xA 作为响应；实践下来，心跳的定时任务一般是相隔 15-20 秒发送一次。前文说到，Websocket 是建立与 TCP 之上，那么其与 HTTP 协议有和关系呢？Websocket 连接分为建连阶段与连接阶段，在建立连接阶段借助于 HTTP ，而在连接阶段则与 HTTP 无关。从浏览器的 Network 中，找到 ws 连接，可以看到：这是一个标准的 HTTP 请求，相比于我们常见的 HTTP 请求协议，请求头中多了几个字段：重点请求首部意义如下：响应头中：可以看到其返回状态码为 101 ，表示切换协议；Upgrade 与 Connection 用于回复客户端表示已经切换协议成功；Sec-WebSocket-Accept 字段与 Sec-WebSocket-Key 相对应，用于验证服务的正确性；当通过 HTTP 建立连接握手后，接下来则是真正的 Websocket 连接了，其基于 TCP 收发数据，Websocket 封装并开放接口。在 HTTP 协议中，很多时候为了加密与安全需要使用 HTTPS 请求（HTTP + TCL）；相应的，在 Websocket 协议中，也是可以使用加密传输的 —— wss ，比如wss://localhost:8080 。使用的也是与 HTTPS 一样的证书，在这里一般是交由 Nginx 等服务层去做证书处理。本文参考文章:https://qiutc.me/post/websocket-guide.html

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个消息回调。onOpeninit会触发WebSocket链接服务器，如果成功，WebSocket就会调用onOpen，告诉调用者，客户端到服务器的通讯链路已经成功建立，可以收发消息了。void WebSocketTestLayer::onOpen(network::WebSocket* ws){if (ws == _wsiSendText){_sendTextStatus->setString("Send Text WS was opened.");}}onMessagenetwork::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)

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个消息回调。onOpeninit会触发WebSocket链接服务器，如果成功，WebSocket就会调用onOpen，告诉调用者，客户端到服务器的通讯链路已经成功建立，可以收发消息了。void WebSocketTestLayer::onOpen(network::WebSocket* ws){if (ws == _wsiSendText){_sendTextStatus->setString("Send Text WS was opened.");}}onMessagenetwork::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.")endlocal function wsSendTextMessage(strData)receiveTextTimes= receiveTextTimes + 1local strInfo= "response text msg: "..strData..", "..receiveTextTimessendTextStatus:setString(strInfo)endlocal function wsSendTextClose(strData)print("_wsiSendText websocket instance closed.")sendTextStatus = nilwsSendText = nilendlocal function wsSendTextError(strData)print("sendText Error was fired")endLua的消息注册不同于C++的继承 & Override，有单独的接口registerScriptHandler。 registerScriptHandler第一个参数是回调函数名，第二个参数是回调类型。 每一个WebSocket实例都需要绑定一次。if nil ~= wsSendText thenwsSendText:registerScriptHandler(wsSendTextOpen,cc.WEBSOCKET_OPEN)wsSendText:registerScriptHandler(wsSendTextMessage,cc.WEBSOCKET_MESSAGE)wsSendText:registerScriptHandler(wsSendTextClose,cc.WEBSOCKET_CLOSE)wsSendText:registerScriptHandler(wsSendTextError,cc.WEBSOCKET_ERROR)endsend消息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 = 0; i < strData.length; i++) {arrData[i] = strData.charCodeAt(i);}return arrData;},send二进制接口和send文本没有区别，区别在于传入的对象，JS内部自己知道对象是文本还是二进制数据，然后做不同的处理。var buf = "Hello WebSocket中文, I'm a binary message.";var binary = this._stringConvertToArray(buf);this._wsiSendBinary.send(binary.buffer);主动关闭WebSocket当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接，以释放服务器和客户端的资源。close会触发onclose消息。onExit: function() {if (this._wsiSendText)this._wsiSendText.close(); }
1、以下是创建一个新的WebSocket对象的API： var Socket = new WebSocket(url, [protocal] );这里第一个参数是指要连接的URL，第二个参数是可选的，如果需要的话，则是指定一个的服务器支持的协议。2、WEB Socket例子：

1.WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。可以在一次特殊的websocket握手后，客户端和浏览器进行双向通信，而http(s）虽然报文头部也可以设置connection为keep-alive不再进行tcp握手，但也只是一个请求对应一个响应，服务器也不能主动向客户端发送数据。 2.与http请求头区别connection:upgradeupgrade:websocket请求头专属：Sec-WebSocket-Key:客户端标识响应头专属：Sec-WebSocket-Accept：服务器标识，以请求标识计算而得Sec-WebSocket-Version：协议版本3.使用4.websocket实例对象属性5.方法1.send方法须在onopen事件之后2.close参数可以设置两个：状态码，描述6.事件1.onopen：一个用于连接打开事件的事件监听器。当readyState的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为"open"的事件对象。2.onmessage：一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为"message"的  MessageEvent  对象。3.onerror：当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。4.onclose：用于监听连接关闭事件监听器。当 WebSocket 对象的readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫close的  CloseEvent  对象。原文：https://cloud.tencent.com/developer/article/1115496 -——“原 荐 webSocket与ajax、web”

先说下跨域的几种方法：jsonp，需要服务器返回jsonp格式服务器代理法，将请求发送本域服务器，由服务器获取内容后返回结果使用window.name方法，不同的标签都能读写window.name的内容跨子域可以两个子域中都将document.domain设置为根域websocket，两个域连接同一个服务器，由服务器控制两个域的信息通信cors请求头跨域，需要在请求头中添加Access-Control-Allow-OriginpostMessage跨域不使用远程服务器配合，理解为对方服务器不可控，1、3、4、5、6、7方法无法使用那么只能由你自己的服务器后端取到数据之后返回到前端，具体实现方法不同语言各不相同