A. Swoole入門 - WebSocket 服務
WebSocket協議是基於TCP的一種新的網路協議。他實現了瀏覽器與伺服器全雙工通信—允許伺服器主動發送信息給客戶端。
建立在TCP協議之上
性能開銷小性能高效
客戶端可以與任意伺服器通信
協議標識符號 ws wss
持久化網路通信協議
WebSocket伺服器是建立在Http伺服器之上的長連接伺服器，客戶端首先會發送一個Http的請求與伺服器進行握手。握手成功後會觸發onOpen事件，表示連接已就緒，onOpen函數中可以得到$request對象，包含了Http握手的相關信息，如GET參數、Cookie、Http頭信息等。
建立連接後客戶端與伺服器端就可以雙向通信了。
客戶端向伺服器端發送信息時，伺服器端觸發onMessage事件回調
伺服器端可以調用$server->push()向某個客戶端（使用$fd標識符）發送消息
伺服器端可以設置onHandShake事件回調來手工處理WebSocket握手
swoole_http_server是swoole_server的子類，內置了Http的支持
swoole_websocket_server是swoole_http_server的子類， 內置了WebSocket的支持。
WebSocket\Server 繼承自 Http\Server
設置了onRequest回調，WebSocket\Server也可以同時作為http伺服器
未設置onRequest回調，WebSocket\Server收到http請求後會返回http 400錯誤頁面
如果想通過接收http觸發所有websocket的推送，需要注意作用域的問題，面向過程請使用global對WebSocket\Server進行引用，面向對象可以把WebSocket\Server設置成一個成員屬性
創建ws_client.html
1、通過httpserver來開啟：分別執行swoole-http服務、websocket服務文件啟動服務，瀏覽器訪問 http://127.0.0.1:8811/ws_client.html ，注意這里請求的是8811埠，即httpserver中配置的埠，在控制台中查看效果。同時可在瀏覽器開啟多個會話，查看多個連接效果。
2、通過websocket-server來開啟載入：
在websocket-server中添加配置
此時關閉http-server、websocket-server，並重啟websocket-server，不再重啟http-server，使用8812埠在瀏覽器訪問 http://127.0.0.1:8812/ws_client.html ，同樣成功。
B. 如何使用WebSocket
在pom.xml中添加Jar包依賴
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
客戶端（Web主頁）代碼：
<%@ page language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<title>Java後端WebSocket的Tomcat實現</title>
</head>
<body>
Welcome<br/><input id="text" type="text"/>
<button onclick="send()">發送消息</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket連接</button>
<hr/>
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判斷當前瀏覽器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/websocket");
}
else {
alert('當前瀏覽器 Not support websocket')
}
//連接發生錯誤的回調方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
}
//接收到消息的回調方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//連接關閉的回調方法
websocket.onclose = function () {
setMessageInnerHTML("WebSocket連接關閉");
}
//監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
window.onbeforeunload = function () {
closeWebSocket();
}
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//關閉WebSocket連接
function closeWebSocket() {
websocket.close();
}
//發送消息
function send() {
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>
Java Web後端代碼
package me.gacl.websocket;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
* @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端,
* 註解的值將被用於監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket伺服器端
*/
@ServerEndpoint("/websocket")
public class WebSocketTest {
//靜態變數，用來記錄當前在線連接數。應該把它設計成線程安全的。
private static int onlineCount = 0;
//concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
//與某個客戶端的連接會話，需要通過它來給客戶端發送數據
private Session session;
/**
* 連接建立成功調用的方法
* @param session 可選的參數。session為與某個客戶端的連接會話，需要通過它來給客戶端發送數據
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在線數加1
System.out.println("有新連接加入！當前在線人數為" + getOnlineCount());
}
/**
* 連接關閉調用的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //在線數減1
System.out.println("有一連接關閉！當前在線人數為" + getOnlineCount());
}
/**
* 收到客戶端消息後調用的方法
* @param message 客戶端發送過來的消息
* @param session 可選的參數
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("來自客戶端的消息:" + message);
//群發消息
for(WebSocketTest item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 發生錯誤時調用
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("發生錯誤");
error.printStackTrace();
}
/**
* 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要添加的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketTest.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketTest.onlineCount--;
}
}
C. websocket 伺服器怎麼啟動
安裝好nodejs之後，我們需要安裝「ws」，也就是我們的websocket實現，安裝方法很簡單，在終端或者命令行中輸入：
npm
install
ws
，等待安裝完成就可以了。
接下來，我們需要啟動我們的websocket服務。首先，我們需要構建自己的http伺服器，在nodejs中構建一個簡單的http伺服器很簡單，so
easy。代碼如下：
var
app
=
http.createserver(onrequest
).listen(
8888
);
onrequest()作為回調函數，它的作用是處理請求，然後做出響應，實際上就是根據接收的url，在伺服器上查找相應的資源，最終返回給瀏覽器。
在構建了http伺服器後，我們需要啟動websocket服務，代碼如下：
var
websocketserver
=
require('ws').server;
var
wss
=
new
websocketserver(
{
server
:
app
}
);
從代碼中可以看出，在初始化websocket服務時，
D. 如何使用WebSocket
在pom.xml中添加Jar包依賴
1 <dependency>
2 <groupId>javax</groupId>
3 <artifactId>javaee-api</artifactId>
4 <version>7.0</version>
5 <scope>provided</scope>
6 </dependency>
客戶端（Web主頁）代碼：
1 <%@ page language="java" pageEncoding="UTF-8" %>
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <title>Java後端WebSocket的Tomcat實現</title>
6 </head>
7 <body>
8 Welcome<br/><input id="text" type="text"/>
9 <button onclick="send()">發送消息</button>
10 <hr/>
11 <button onclick="closeWebSocket()">關閉WebSocket連接</button>
12 <hr/>
13 <div id="message"></div>
14 </body>
15
16 <script type="text/javascript">
17 var websocket = null;
18 //判斷當前瀏覽器是否支持WebSocket
19 if ('WebSocket' in window) {
20 websocket = new WebSocket("ws://localhost:8080/websocket");
21 }
22 else {
23 alert('當前瀏覽器 Not support websocket')
24 }
25
26 //連接發生錯誤的回調方法
27 websocket.onerror = function () {
28 setMessageInnerHTML("WebSocket連接發生錯誤");
29 };
30
31 //連接成功建立的回調方法
32 websocket.onopen = function () {
33 setMessageInnerHTML("WebSocket連接成功");
34 }
35
36 //接收到消息的回調方法
37 websocket.onmessage = function (event) {
38 setMessageInnerHTML(event.data);
39 }
40
41 //連接關閉的回調方法
42 websocket.onclose = function () {
43 setMessageInnerHTML("WebSocket連接關閉");
44 }
45
46 //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
47 window.onbeforeunload = function () {
48 closeWebSocket();
49 }
50
51 //將消息顯示在網頁上
52 function setMessageInnerHTML(innerHTML) {
53 document.getElementById('message').innerHTML += innerHTML + '<br/>';
54 }
55
56 //關閉WebSocket連接
57 function closeWebSocket() {
58 websocket.close();
59 }
60
61 //發送消息
62 function send() {
63 var message = document.getElementById('text').value;
64 websocket.send(message);
65 }
66 </script>
67 </html>
Java Web後端代碼
1 package me.gacl.websocket;
2
3 import java.io.IOException;
4 import java.util.concurrent.CopyOnWriteArraySet;
5
6 import javax.websocket.*;
7 import javax.websocket.server.ServerEndpoint;
8
9 /**
10 * @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端,
11 * 註解的值將被用於監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket伺服器端
12 */
13 @ServerEndpoint("/websocket")
14 public class WebSocketTest {
15 //靜態變數，用來記錄當前在線連接數。應該把它設計成線程安全的。
16 private static int onlineCount = 0;
17
18 //concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識
19 private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
20
21 //與某個客戶端的連接會話，需要通過它來給客戶端發送數據
22 private Session session;
23
24 /**
25 * 連接建立成功調用的方法
26 * @param session 可選的參數。session為與某個客戶端的連接會話，需要通過它來給客戶端發送數據
27 */
28 @OnOpen
29 public void onOpen(Session session){
30 this.session = session;
31 webSocketSet.add(this); //加入set中
32 addOnlineCount(); //在線數加1
33 System.out.println("有新連接加入！當前在線人數為" + getOnlineCount());
34 }
35
36 /**
37 * 連接關閉調用的方法
38 */
39 @OnClose
40 public void onClose(){
41 webSocketSet.remove(this); //從set中刪除
42 subOnlineCount(); //在線數減1
43 System.out.println("有一連接關閉！當前在線人數為" + getOnlineCount());
44 }
45
46 /**
47 * 收到客戶端消息後調用的方法
48 * @param message 客戶端發送過來的消息
49 * @param session 可選的參數
50 */
51 @OnMessage
52 public void onMessage(String message, Session session) {
53 System.out.println("來自客戶端的消息:" + message);
54 //群發消息
55 for(WebSocketTest item: webSocketSet){
56 try {
57 item.sendMessage(message);
58 } catch (IOException e) {
59 e.printStackTrace();
60 continue;
61 }
62 }
63 }
64
65 /**
66 * 發生錯誤時調用
67 * @param session
68 * @param error
69 */
70 @OnError
71 public void onError(Session session, Throwable error){
72 System.out.println("發生錯誤");
73 error.printStackTrace();
74 }
75
76 /**
77 * 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要添加的方法。
78 * @param message
79 * @throws IOException
80 */
81 public void sendMessage(String message) throws IOException{
82 this.session.getBasicRemote().sendText(message);
83 //this.session.getAsyncRemote().sendText(message);
84 }
85
86 public static synchronized int getOnlineCount() {
87 return onlineCount;
88 }
89
90 public static synchronized void addOnlineCount() {
91 WebSocketTest.onlineCount++;
92 }
93
94 public static synchronized void subOnlineCount() {
95 WebSocketTest.onlineCount--;
96 }
97 }
E. 如何使用WebSocket
需要用到webSocket，所以搜集了一下使用方法，總結下自己的經驗
首先要導入webSocket的包，git下載地址https://github.com/square/SocketRocket
導入
這個包，然後配置環境，導入需要用的框架
libicucore.dylib//這個現在Xcode里沒有，需要自己找到資源後手動添加
CFNetwork.framework
Security.framework
Foundation.framework。
要記得添加pch文件。
然後編譯，工程運行沒有錯誤，進行下一步
在用到的ViewController里包含一下頭文件
1.
2.
3.一個測試用的介面ws://echo.websocket.org
4.必須實現的代理方法
- (void)webSocketDidOpen:(SRWebSocket *)webSocket;
- (void)webSocket:(SRWebSocket *)webSocket didFailWithError:(NSError *)error;
- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message；
- (void)webSocket:(SRWebSocket *)webSocket didCloseWithCode:(NSInteger)code reason:(NSString *)reason wasClean:(BOOL)wasClean;
- (void)webSocket:(SRWebSocket *)webSocket didReceivePong:(NSData *)pongPayload;
5，在第一個代理方法里發送請求
[_webSocket send:@"test success"];
在第三個代理方法里列印數據
在第四個代理方法里置為nil
_webSocket.delegate = nil;
完成。
F. 如何配置websocket伺服器
配置websocket伺服器方法詳見：
https://..com/question/2139175672434454788.html
G. 怎麼啟動websocket服務
關於websocket服務如何啟動，代碼如下：
@ServerEndpoint(value = "/chat-room-channel")
public class ChatRoomChannel {
Logger logger = LoggerFactory.getLogger(ChatRoomChannel.class);
public static final Set<Session> SESSIONS = Collections.synchronizedSet(new HashSet<Session>());
public static void notifyAll(String message) {
synchronized (SESSIONS) {
final Iterator<Session> i = SESSIONS.iterator();
while (i.hasNext()) {
final Session session = i.next();
if (session.isOpen()) {
session.getAsyncRemote().sendText(message);
}
}
}
}
@OnOpen
public void onConnect(final Session session){
SESSIONS.add(session);
HashMap<String, Object> msgMap = new HashMap<String, Object>();
msgMap.put(Commom.TYPE, Commom.ONLINE);
msgMap.put(Commom.MESSAGE, SESSIONS.size());
String messgae = new JSONObject(msgMap).toString();
logger.debug(messgae);
notifyAll(messgae);
}
}
H. 如何使用WebSocket
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 = 0; i < strData.length; i++) {
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();
}
I. 如何使用WebSocket
WebSocket 協議本質上是一個基於 TCP 的協議。為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向伺服器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息」Upgrade: WebSocket」表明這是一個申請協議升級的 HTTP 請求，伺服器端解析這些附加的頭信息然後產生應答信息返回給客戶端，客戶端和伺服器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或者伺服器端的某一方主動的關閉連接。
下面我們來詳細介紹一下 WebSocket 協議，由於這個協議目前還是處於草案階段，版本的變化比較快，我們選擇目前最新的 draft-ietf-hybi-thewebsocketprotocol-17 版本來描述 WebSocket 協議。因為這個版本目前在一些主流的瀏覽器上比如 Chrome,、FireFox、Opera 上都得到比較好的支持。通過描述可以看到握手協議
客戶端發到伺服器的內容:
代碼如下 復制代碼
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
從伺服器到客戶端的內容:
代碼如下 復制代碼
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat
這些請求和通常的 HTTP 請求很相似，但是其中有些內容是和 WebSocket 協議密切相關的。我們需要簡單介紹一下這些請求和應答信息，」Upgrade:WebSocket」表示這是一個特殊的 HTTP 請求，請求的目的就是要將客戶端和伺服器端的通訊協議從 HTTP 協議升級到 WebSocket 協議。其中客戶端的Sec-WebSocket-Key和伺服器端的Sec-WebSocket-Accept就是重要的握手認證信息了，這些內容將在服 務器端實現的博文中講解。
相信通過上文的講解你應該對WebSocket有了個初步認識了，如果有任何疑問歡迎交流。
客戶端
如概念篇中介紹的握手協議，客戶端是由瀏覽器提供了API，所以只要使用JavaScript來簡單調用即可，而伺服器端是要自己實現的，伺服器端將在下個博文來講。
代碼如下 復制代碼
WebSocket JavaScript 介面定義:
[Constructor(in DOMString url, optional in DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;
// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;
// networking
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;
簡單了解下介面方法和屬性：
readyState表示連接有四種狀態：
CONNECTING (0)：表示還沒建立連接；
OPEN (1)： 已經建立連接，可以進行通訊；
CLOSING (2)：通過關閉握手，正在關閉連接；
CLOSED (3)：連接已經關閉或無法打開；
url是代表 WebSocket 伺服器的網路地址，協議通常是」ws」或「wss(加密通信)」,send 方法就是發送數據到伺服器端；
close 方法就是關閉連接；
onopen連接建立，即握手成功觸發的事件；
onmessage收到伺服器消息時觸發的事件；
onerror異常觸發的事件；
onclose關閉連接觸發的事件；
JavaScript調用瀏覽器介面實例如下：
代碼如下 復制代碼
var wsServer = 'ws://localhost:8888/Demo'; //伺服器地址
var websocket = new WebSocket(wsServer); //創建WebSocket對象
websocket.send("hello");//向伺服器發送消息
alert(websocket.readyState);//查看websocket當前狀態
websocket.onopen = function (evt) {
//已經建立連接
};
websocket.onclose = function (evt) {
//已經關閉連接
};
websocket.onmessage = function (evt) {
//收到伺服器消息，使用evt.data提取
};
websocket.onerror = function (evt) {
//產生異常
};
J. 如何使用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 = 0; i < strData.length; i++) {
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();
}