nodejs的websocket實現與cocoscreator前端進行簡單通訊(cocoscreator後端接口入門)

看了幾天nodejs後決定自己試試寫一個簡單的cocoscreator的服務端程序

nodejs的本體可以直接百度nodejs進入官網下載，安裝後應該會自動下載安裝npm並且配置環境變量，沒有正常安裝，請自行百度

程序是用的是nodejs-websocket的包實現的，在cmd命令窗口中輸入一下代碼
npm install nodejs-websocket -g
即可將nodejs-websocket安裝在全局環境

先來看看nodejs-websocket的一篇介紹博客：https://www.jianshu.com/p/f0baf93a3795

// websocket.js
const ws = require('nodejs-websocket')

const createServer = () => {
  let server = ws.createServer(connection => {
    connection.on('text', function(result) {
      console.log('發送消息', result)
    })
    connection.on('connect', function(code) {
      console.log('開啓連接', code)
    })
    connection.on('close', function(code) {
      console.log('關閉連接', code)
    })
    connection.on('error', function(code) {
      console.log('異常關閉', code)
    })
  })
  return server
}

module.exports = createServer()

ws是對nodejs-websocket包的引用，在代碼最主要的部分ws.createServer是一個回調函數，對其引用server調用.listen()方法可以使其監聽服務器中的指定端口，每當此端口被客戶端連接時，server便會被調用。

ws.createServer也是一個回調函數，當客戶端連接服務器時，便會向此函數傳入一個代表連接的參數也就是connection，此回調函數裏分別註冊了四個事件，分別是

• ‘text’:當客戶端向服務端發送字符碼時會響應該事件，字符碼可以在事件回調函數中通過形參result傳入服務端。
• ‘connect’:當客戶端連接上服務端時會拋出該事件
• ‘close’:當客戶端與服務器端連接斷開時會拋出該事件
• ‘error’:當連接出現異常時會拋出該事件

還有一個’binary’,用法與text類似，不過接受的數據是二進制塊

梳理一下，每當客戶端連接服務端時，server對應的ws.createServer方法就會被調用，方法放出一個代表連接的對象傳入ws.createServer()中的回調函數，對這個連接對象進行事件監控就可以接受到來自客戶端的消息，這個連接對象會一直存在，直到它被服務器端或客戶端請求關閉或者異常關閉，關閉後會觸發一個close事件。

到這裏我們就能夠被動的接收來自客戶端的信息了，但是websocket之所以出現就是因爲ajax等方法的服務器不能向客戶端發送信息，所以我們還得知道怎麼向客戶端發送消息。

nodejs-websocket發送數據的方法也是在連接對象類connection上的:

• connection.send([字符串或者二進制塊]):發送一個字符碼或者一個二進制塊，
• connection.sendText([字符串]):發送一個字符碼
• connection.sendBinary([二進制塊])發送一個二進制塊

當連接建立好，我們就可以調用以上方法來實現從服務端向客戶端發送數據。

正文開始

我們先寫一個什麼都不做的服務端，用來建立連接但是不做任何事

var ws = require("nodejs-websocket");

var server = ws.createServer(function(conn){
    console.log("建立連接");
    conn.on('error', function(){

    });
}).listen(3000);

每當有客戶端連接服務端時，服務端便會輸出一段字符串，代碼中註冊了error事件來防止服務器因爲一些意外的錯誤而崩潰。

將以上代碼寫入一個任意名稱的.js文件中，然後在cmd命令窗中進入文件所在的目錄下，輸入node 名稱.js來運行程序

然後新建一個cocoscreator工程，再新建一個名稱隨意的js腳本文件

將該腳本掛到任意節點下
然後開始編輯腳本

 onLoad () {
     var ws = new WebSocket("ws://localhost:3000");
     ws.onopen = function(event){
        cc.log("連接建立");
    }
 },

在onLoad方法中new一個WebSocket的對象，對象傳參爲服務端的地址，我是在本機上搭的服務器，所以連接也是在本機，3000代表端口號，在服務端代碼中我們執行了listen(3000)就代表服務端會監聽本機地址的3000端口號。new成功即成功連接上了服務端，ws.onopen事件在連接完全建立後會被拋出。

保存後在cocoscreator界面點擊測試。

可以看到服務端和客戶端都輸出了這條語句，如果沒有反應，請重啓服務端與客戶端再試試。

連接成功後即可以進行簡單通訊了，我們在cocos工程中加一個Lable組件，一個輸入框組件，一個按鈕組件，用來實現輸入框輸入後客戶端向服務端傳輸數據，然後服務端向所有客戶端轉發數據，客戶端將收到的數據顯示在Lable組件的需求。

然後將組件掛載到腳本上

Label和editbox需要向程序提供或者供程序修改數據，所以需要掛載，button用來觸發腳本中的提交事件，所以不用掛上來。

接下來可以寫程序了。

onLoad () {
     this.ws = new WebSocket("ws://localhost:3000");
     this.ws.onopen = function(event){
        cc.log("連接建立");
    }

    var self = this;

    this.ws.onmessage = function(event){
        self.label.string = event.data;
    }
 },

 sendMassage: function(){
    var massage = this.editbox.string;
    if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(massage);
    }
 },

將var ws修改爲this.w s，這樣我們就可以在其他的方法中訪問ws了。
onLoad中定義了一個self變量來保存this引用，這是爲了接下來在事件方法的內部能夠訪問到外部的Label組件。(this在事件回調中代表的值與在外邊的值不一樣)
在onLoad中對ws註冊onmessage事件，如果接收到服務端的數據，這個事件就會被觸發，方法中將label設置爲發過來的字符串。
在腳本中新建一個sendMassage的方法，這個方法用來獲取輸入框中的字符串，並將此字符串發送給服務端，ws.send就是向服務端發送數據的方法，需要注意的是，每次發送數據都需要檢查一下ws的readyState屬性，只有當其等於WebSocket.OPEN也就是1時，ws才被允許發送數據。
sendMassage需要被button調用

客戶端程序就這樣，接下來寫服務端程序

var ws = require("nodejs-websocket");

var server = ws.createServer(function(conn){
    console.log("建立連接");
    conn.on('error', function(){

    });
    conn.on('text', function(str){
      server.connections.forEach(function(conn) {
        conn.sendText(str)
      })
    })
}).listen(3000);

我們在createServer的回調函數中註冊了’text’的事件，每當本連接中客戶端向服務端傳輸字符串時就會拋出該事件。
server.connection會返回所有連接到該服務端的連接對象，對這些連接對象都發送我們接收到的字符串就可以實現轉發字符的功能了。
保存代碼並重啓服務端與客戶端,就可以實現多個客戶端交互的功能了。

就醬

如果還有不明白的地方可以關注我的微信公衆號私聊我：‘九藝雜貨鋪’