??在做 Cocos Creator H5 聯(lián)機(jī)小游戲的時候, 想用 Socket.io 來進(jìn)行實(shí)時通信, 一陣搜索發(fā)現(xiàn)相關(guān)資料甚少, 總有人評論讓自己封裝 Web Socket. 既然有現(xiàn)成的完善的帶有心跳和重連機(jī)制的 Socket.io, 為什么要自己造前后端的輪子而不把精力放在實(shí)現(xiàn)所需功能上呢, 所以寫一篇文章來記錄一下.

環(huán)境

開發(fā)環(huán)境:

• 操作系統(tǒng): Win10
• Creator 版本: v2.0.9
• NodeJS 版本: v10.0.6
• Socket.io 版本: v2.2.0
• 開發(fā)語言: TypeScript
  其他環(huán)境請自行嘗試

準(zhǔn)備工作

目錄結(jié)構(gòu):

sio
 └─ sio-client
 │
 └─ sio-server

1. 新建文件夾 sio 作為項目根目錄
2. 啟動 Cocos Creator, 在項目根目錄新建 Hello TypeScript 項目, 命名為 sio-client , 打開工程并初始化 TS 項目. 具體步驟不再贅述, 詳見

• Cocos Creator 新手入門: 官方文檔
• TypeScript 項目入門教程: TS 教程

3. 在項目根目錄新建文件夾, 命名為 sio-server 并在該文件夾初始化 npm 項目, 安裝相關(guān)模塊. 我的package.json如下, 具體過程不再贅述.

{
  "name": "sio-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.7.0",
    "socket.io": "^2.2.0"
  },
  "devDependencies": {
    "debug": "^4.1.1"
  }
}

4. 進(jìn)入sio-server\node_modules\socket.io-client\dist 目錄, 找到 socket.io.js 文件, 把它放入你的 Cocos Creator 工程中. 我這里把它放在了 assets\Script\lib 中

至此, 準(zhǔn)備工作完成, 開始寫代碼

代碼

服務(wù)端

我們這里使用 Node.JS 搭建服務(wù)端.
進(jìn)入 sio-server 文件夾, 新建 index.js , 寫一個基于 Koa2 和 Socket.io 的簡易 Web Socket 服務(wù)端.

// index.js

var Koa = require('koa');
var app = new Koa();
const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);

io.on('connection', socket => {
  // 當(dāng)用戶建立Socket連接時
  console.log('user connected');

  // 接收消息
  socket.on('msg', data => {
    console.log(data);
  });

  // 當(dāng)用戶斷開連接時
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

// 監(jiān)聽本地3000端口
server.listen(3000, () => {
  console.log('listening on *:3000');
});

然后在服務(wù)端根目錄執(zhí)行 node index

? node index
listening on *:3000

則服務(wù)器搭建成功

Creator 項目

我創(chuàng)建的是 TS 項目, 準(zhǔn)備階段已經(jīng)將 socket.io.js 放進(jìn)了 Hello TypeScript 項目中, 需要將 Socket.io-client TS 聲明(https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/socket.io-client/index.d.ts)下載至 socket.io.js 所在文件夾并重命名為 socket.io.d.ts , 接下來小小地修改一下 HelloWorld.ts 來引用它.

const { ccclass, property } = cc._decorator;
import { connect } from './lib/socket.io';

@ccclass
export default class Helloworld extends cc.Component {
  @property(cc.Label)
  label: cc.Label = null;

  start() {
    let self = this;
    var socket = null;

    socket = connect('http://localhost:3000');
    socket.on('connected', () => {
      console.log('Socket connected');
    });
  }
}

運(yùn)行結(jié)果

NodeJS 控制臺輸出

user connected

Web Mobile 輸出

Socket connected