在做 Cocos Creator H5 联机小游戏的时候, 想用 Socket.io 来进行实时通信, 一阵搜索发现相关资料甚少, 总有人评论让自己封装 Web Socket. 既然有现成的完善的带有心跳和重连机制的 Socket.io, 为什么要自己造前后端的轮子而不把精力放在实现所需功能上呢, 所以写一篇文章来记录一下.
环境
开发环境:
- 操作系统: Win10
- Creator 版本: v2.0.9
- NodeJS 版本: v10.0.6
- Socket.io 版本: v2.2.0
- 开发语言: TypeScript
其他环境请自行尝试
准备工作
目录结构:
sio
└─ sio-client
│
└─ sio-server
- 新建文件夹
sio作为项目根目录 - 启动 Cocos Creator, 在项目根目录新建 Hello TypeScript 项目, 命名为
sio-client, 打开工程并初始化 TS 项目. 具体步骤不再赘述, 详见
- 在项目根目录新建文件夹, 命名为
sio-server并在该文件夹初始化 npm 项目, 安装相关模块. 我的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" } } - 进入
sio-server\node_modules\socket.io-client\dist目录, 找到socket.io.js文件, 把它放入你的 Cocos Creator 工程中. 我这里把它放在了assets\Script\lib中
至此, 准备工作完成, 开始写代码
代码
服务端
我们这里使用 Node.JS 搭建服务端.
进入 sio-server 文件夹, 新建 index.js , 写一个基于 Koa2 和 Socket.io 的简易 Web Socket 服务端.
// 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 => { // 当用户建立Socket连接时 console.log('user connected'); // 接收消息 socket.on('msg', data => { console.log(data); }); // 当用户断开连接时 socket.on('disconnect', () => { console.log('user disconnected'); }); }); // 监听本地3000端口 server.listen(3000, () => { console.log('listening on *:3000'); }); 然后在服务端根目录执行 node index
❯ node index
listening on *:3000 则服务器搭建成功
Creator 项目
我创建的是 TS 项目, 准备阶段已经将 socket.io.js 放进了 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'); }); } } 运行结果
NodeJS 控制台输出
user connected
Web Mobile 输出
Socket connected
作者：R4M80
链接：https://www.jianshu.com/p/822d1a01b7df
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。