??在做 Cocos Creator H5 聯(lián)機(jī)小游戲的時(shí)候, 想用 Socket.io 來(lái)進(jìn)行實(shí)時(shí)通信, 一陣搜索發(fā)現(xiàn)相關(guān)資料甚少, 總有人評(píng)論讓自己封裝 Web Socket. 既然有現(xiàn)成的完善的帶有心跳和重連機(jī)制的 Socket.io, 為什么要自己造前后端的輪子而不把精力放在實(shí)現(xiàn)所需功能上呢, 所以寫一篇文章來(lái)記錄一下.
環(huán)境
開發(fā)環(huán)境:
- 操作系統(tǒng): Win10
- Creator 版本: v2.0.9
- NodeJS 版本: v10.0.6
- Socket.io 版本: v2.2.0
- 開發(fā)語(yǔ)言: TypeScript
其他環(huán)境請(qǐng)自行嘗試
準(zhǔn)備工作
目錄結(jié)構(gòu):
sio
└─ sio-client
│
└─ sio-server
- 新建文件夾
sio作為項(xiàng)目根目錄 - 啟動(dòng) Cocos Creator, 在項(xiàng)目根目錄新建 Hello TypeScript 項(xiàng)目, 命名為
sio-client, 打開工程并初始化 TS 項(xiàng)目. 具體步驟不再贅述, 詳見
- 在項(xiàng)目根目錄新建文件夾, 命名為
sio-server并在該文件夾初始化 npm 項(xiàng)目, 安裝相關(guān)模塊. 我的package.json如下, 具體過(guò)程不再贅述.
{
"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"
}
}
- 進(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 , 寫一個(gè)基于 Koa2 和 Socket.io 的簡(jiǎn)易 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連接時(shí)
console.log('user connected');
// 接收消息
socket.on('msg', data => {
console.log(data);
});
// 當(dāng)用戶斷開連接時(shí)
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 項(xiàng)目
我創(chuàng)建的是 TS 項(xiàng)目, 準(zhǔn)備階段已經(jīng)將 socket.io.js 放進(jìn)了 Hello TypeScript 項(xiàng)目中, 需要將 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 , 接下來(lái)小小地修改一下 HelloWorld.ts 來(lái)引用它.
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 控制臺(tái)輸出
user connected
Web Mobile 輸出
Socket connected
