上一章:零:聊一下學(xué)啥
說好的十行代碼,你們數(shù)一數(shù)!
var?ws?=?require("nodejs-websocket");
var?server?=?ws.createServer(function?(connect)?
{
????connect.on("text",?function?(data)?{
????????console.log('收到消息=',data)
????})
????connect.on("close",?function?(code,?reason)?{});
????connect.on("error",?function?(code,?reason)?{});
}).listen(3000)
console.log('websocket服務(wù)端啟動')
看不太懂?沒關(guān)系,只要知道代碼有十行,古人誠不我欺?即可!
工欲善其事必先利其器
說代碼之前我們先進(jìn)行一些準(zhǔn)備活動。
3個(gè)軟件,1個(gè)系統(tǒng)工具
(1)nodejs 程序安裝?下載
(2)vscode 代碼編輯器?下載
(3)Cocos Creator客戶端游戲編輯器??下載
(4)CMD系統(tǒng)命令行工具
1,NodeJs的安裝:
在上述的下載鏈接選擇win安裝包的64位,剩下的就是一路下一步即安裝完成

2,vscode
此編輯器安裝也沒有什么太大的難點(diǎn),一路下一步安裝即可。

3,Cocos Creator
這個(gè)游戲引擎我們先下載它的安裝面板,從面板里面下載引擎。安裝面板的安裝就是下一步下一步,安裝好后注冊一個(gè)賬號登錄即可

安裝面板安裝好后,我們開始下載引擎。

點(diǎn)擊下載按鈕下載安裝最新穩(wěn)定版本即可

4,CMD命令行
點(diǎn)擊win10系統(tǒng)左下角窗口按鈕

切換成英文輸入法,輸入cmd,選中打開如下程序。

到此準(zhǔn)備活動全部完畢!
服務(wù)端代碼:
(1)創(chuàng)建服務(wù)端代碼
還記得我們上面的十行代碼嗎?現(xiàn)在先在桌面上新建一個(gè)文本文件,重命名為server.js文件


把我們的十行代碼直接拷貝進(jìn)server.js,保存文件!(如果你安裝了VScode代碼編輯器,雙擊就可以打開.js文件)
為了看的更方便我們加了一些注釋和打印信息,你可以從所有的注釋信息里面一行一行看下來就能知道每一行代碼都執(zhí)行了什么邏輯。
//引入websocket模塊
let?ws?=?require("nodejs-websocket");
//啟動websocket服務(wù)器
let?server?=?ws.createServer(function?(connect)?{
????connect.on('text',?function?(result)?{
????????console.log('接收消息',?result)
????})
????connect.on('close',?function?(code)?{
????????console.log('關(guān)閉連接',?code)
????})
????connect.on('error',?function?(code)?{
????????console.log('異常關(guān)閉',?code)
????})
//設(shè)置端口號為3000
}).listen(3000)
console.log('websocket服務(wù)端啟動')?

(2)跑起服務(wù)端代碼
進(jìn)入項(xiàng)目文件夾
為了不讓桌面變得非?;靵y我們新建一個(gè)文件夾server,并且把剛才的server.js文件拖入文件夾中

在啟動服務(wù)端程序前,我們先來為服務(wù)端安裝一個(gè)websocket的模塊,打開CMD命令行程序
輸入cd空格后,把桌面上的文件夾直接拖入CMD界面,最后按回車


看到最前面的盤符路徑都對了之后再進(jìn)行下一步操作。

安裝NodeJS模塊
初始化npm下載工具(這個(gè)工具是nodejs自帶的下載nodejs庫的工具)
npm init -y

安裝websocket
npm install nodejs-websocket?
在當(dāng)前項(xiàng)目文件夾下安裝nodejs模塊,不會影響到其它項(xiàng)目

安裝需要一些時(shí)間,安裝好后看看文件夾里面如果多了下圖這些文件就是websocket模塊安裝成功了

(3)運(yùn)行nodejs服務(wù)端
在CMD命令行中輸入如下命令:
node server.js
出現(xiàn)如下提示,證明服務(wù)端啟動成功!是不是十分簡單!

關(guān)閉服務(wù)端
如果想要關(guān)閉服務(wù)端只要按照Ctrl按鍵不放,再按C鍵即可退出。

客戶端
本節(jié)課我們先來創(chuàng)建一個(gè)簡單的客戶端!
打開Cocos的安裝面板來新建一個(gè)項(xiàng)目

選擇空模板,在項(xiàng)目名稱處起名Client,選擇一個(gè)保存項(xiàng)目的位置(日后能找的到的)創(chuàng)建并打開項(xiàng)目

右鍵點(diǎn)擊? ?asset -> 新建 -> Scene
新建一個(gè)場景,并雙擊紅框處場景進(jìn)入當(dāng)前場景(可以給場景重命名為Client)

再次右鍵點(diǎn)擊? ?asset -> 新建 -> JavaScript
同時(shí)改名腳本Client

腳本綁定場景中節(jié)點(diǎn)(為了讓場景中的Canvas節(jié)點(diǎn)被創(chuàng)建時(shí)候自動運(yùn)行腳本)

拖入成功后會有如下顯示

雙擊剛才創(chuàng)建的Client腳本

在start函數(shù)處填寫如下代碼,基本和服務(wù)端差不多
不同處在于填寫了連接服務(wù)端ip的信息
??let?ws?=?new?WebSocket("ws://127.0.0.1:3000");
??let?ws?=?new?WebSocket("ws://127.0.0.1:3000");
????????ws.onopen?=?function?(event)?{
????????????console.log("連接服務(wù)端");
????????};
????????ws.onmessage?=?function?(event)?{
????????????console.log("接收服務(wù)端信息:?"?+?event.data);
????????};
????????ws.onerror?=?function?(event)?{
????????????console.log("異常關(guān)閉");
????????};
????????ws.onclose?=?function?(event)?{
????????????console.log("斷開連接");
????????};

填寫后

啟動客戶端(這里我選擇用安卓了chrome瀏覽器方便調(diào)試,強(qiáng)烈建議開發(fā)階段用這個(gè)瀏覽器作為調(diào)試工具)
千萬記住保存代碼和項(xiàng)目后點(diǎn)擊啟動游戲,啟動游戲前按上面的教程
node server.js
在CMD中先啟動服務(wù)端

那么你將會在瀏覽器里面看到我們的啟動界面(黑漆漆一片?),當(dāng)然我們要看看之前的打印信息,在瀏覽器里面(chrome瀏覽器)快捷鍵Ctrl+Shift+I進(jìn)入開發(fā)者工具如下圖

以上就完成了服務(wù)端和客戶端的連接!
客戶端給服務(wù)端發(fā)送信息
連接之后,我們來看看從客戶端怎么給服務(wù)端發(fā)送信息。
在客戶端連上服務(wù)端的時(shí)候添加如下代碼ws.send('');引號中的消息內(nèi)容可以自己定義
ws.send('客戶端1發(fā)來消息');
再次啟動服務(wù)端和客戶端后看到CMD中收到如下信息,大功告成

服務(wù)端給客戶端發(fā)送信息
來而不往非禮也!我們在服務(wù)端接收了客戶端發(fā)過來的消息,正好可以順勢給客戶端發(fā)送一個(gè)歡迎光臨的回贈消息
connect.sendText('歡迎光臨');
我們可以在服務(wù)端接收客戶端消息的時(shí)機(jī),回送一條消息

于是你就可以在谷歌瀏覽器中看到如下回復(fù)代碼:

最后:如果你有什么疑問和建議隨時(shí)歡迎來到群里和我溝通,我將盡快為您解答247260198
本教程所有代碼均在github上分享:下載
下一章:貳:極簡聊天系統(tǒng)