目錄
HTML+JS+websocket 實例，聯機“游戲王”對戰 1
HTML+JS+websocket 實例，聯機“游戲王”對戰 2 - 聯機模式
HTML+JS+websocket 實例，聯機“游戲王”對戰 3 - 界面布局
HTML+JS+websocket 實例，聯機“游戲王”對戰 4 - 卡組系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 5 - 卡片選中系統
HTML+JS+websocket 實例，聯機“游戲王”對戰 6 - 卡片放置，戰場更新
HTML+JS+websocket 實例，聯機“游戲王”對戰 7 - 墓地，副控制面板
HTML+JS+websocket 實例，聯機“游戲王”對戰 8 - 返回手卡，卡組
HTML+JS+websocket 實例，聯機“游戲王”對戰 9 - 實現簡單 websocket 通信
HTML+JS+websocket 實例，聯機“游戲王”對戰 10 - 搭建游戲服務端
HTML+JS+websocket 實例，聯機“游戲王”對戰 11 - 客戶端消息的收發
HTML+JS+websocket 實例，聯機“游戲王”對戰 12 - 消息發送具體場景
HTML+JS+websocket 實例，聯機“游戲王”對戰 13 - 實機演示
實現簡單 websocket 通信
1. WebSocket 簡介：
有關 websocket 的簡介，不了解 websocket 的朋友可以參考下CSDN大佬的這篇博文（侵刪）：
這篇博文詳細地介紹了websocket 的工作原理和簡單應用，并且還有幾個非常簡潔實用的案例。
2. 搭建簡易WebSocket服務端：
我們在這里也實現一個簡單的WebSocket服務端與客戶端，方便后面介紹。
首先我們需要下載并安裝node.js：
搜索node.js，官網下載，有穩定版本和最新版本，一般用穩定版本，安裝跟著提示走就行。
安裝好后打開命令提示符cmd，輸入node，執行出現版本號就表示成功安裝了：
接下來開始搭建簡易服務端。
隨意建立一個項目文件夾，之后在該文件夾下運行命令窗口（或者cd到該文件夾），并輸入命令 npm install ws 來安裝 websocket 依賴包，安裝后項目目錄下會生成一個文件夾 node_modules 與一個 json 文件：
之后我們創建作為服務端的 js 文件，命名為 server.js，先貼下代碼：
//引入websocket ws模塊
var WebSocketServer = require('ws').Server,
//初始化websocket
wss = new WebSocketServer({ port: 9999 });
wss.on('connection', function (ws) {
console.log('client connected');
ws.on('message', function (message) {
console.log(message);
if(message == 'client1_msg') {
ws.send("收到client1");
} else {
ws.send("收到client2");
}
});
//SIGINT這個信號是系統默認信號，代表信號中斷，就是ctrl+c
process.on('SIGINT', function () {
console.log("Closing things");
process.exit();
});
});
當有客戶端初次與服務端建立連接時，服務端會打印“client connected”。當服務端接收到客戶端發來的消息時則會打印出客戶端發送的消息內容并且向客戶端返回一個消息表示收到信息。
接下來是客戶端：
這里隨意創建一個 html 文件 client1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>websocket測試</title>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("您的瀏覽器支持 WebSocket!");
// 初始化一個 WebSocket 對象，參數指明url
var ws = new WebSocket("ws:localhost:9999");
// WebSocket 連接時候觸發
ws.onopen = function()
{
//使用 send() 方法發送數據
ws.send("client1_msg");
alert("數據發送中...");
};
// 接收服務端數據時觸發
ws.onmessage = function (evt)
{
var received_msg = evt.data;
console.log(received_msg);
alert("數據已接收...");
};
//斷開 web socket 連接成功觸發事件
ws.onclose = function()
{
// 關閉 websocket
alert("連接已關閉...");
};
}
else
{
// 瀏覽器不支持 WebSocket
alert("您的瀏覽器不支持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">運行 WebSocket</a>
</div>
</body>
</html>
用瀏覽器打開客戶端后即會向服務端發送連接請求，注意客戶端與服務端的通信端口號要保持一致。由于我們的服務端創建在本地，故 WebSocket 對象的 url 參數是 localhost。
當客戶端與服務端初次連接時，客戶端會發送一條信息（“client1_msg”），當客戶端接收到服務端返回的信息時，則會在控制臺打印那條信息。
準備完畢，我們來試一試：
首先在項目文件夾運行命令窗口，并且輸入node server.js 指令來運行服務端。
之后我們運行服務端 client1，用瀏覽器打開即可。我們可以看到服務端打印了客戶端向其發送的信息，客戶端也打印了服務端返回的信息。
這樣一個簡單的 websocket 客戶端與服務端之間的通信模型就搭建好了。如果有多個用戶，都是基于同樣的原理與服務端之間通信，而用戶與用戶之間的交流則一般需要利用服務端做中介，處理并交換不同用戶之間的信息。
下一章我們就把這個模型應用到游戲中，實現對戰雙方玩家之間的通信。
