In doing Cocos Creator H5 online games, we want to communicate in real time with Socket.io, while search found little information, people have to make their comments package Web Socket. Since there are ready-made complete with a heartbeat and reconnection mechanisms Socket.io, why build your own front and rear ends of the wheel and not to focus on achieving the function of it, so write an article to record what you want.

surroundings

Development Environment:

Operating System: Win10
Creator Version: v2.0.9
NodeJS version: v10.0.6
Socket.io version: v2.2.0
Development Language: TypeScript
other environmental Try yourself

Ready to work

Directory Structure:

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

New folder sioas the project root directory
Start Cocos Creator, a new project in the root directory of Hello TypeScript project, named sio-client, open the project and initialize TS project. Concrete steps will not go, see

Cocos Creator Getting Started: official document
TypeScript project Start Tutorial: TS Tutorial

In the project root directory create a new folder, named sio-serverand initialize the folder npm projects related to the installation module. My package.jsonfollowing specific procedure is omitted.

{
  "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" } }

Enter the sio-server\node_modules\socket.io-client\distdirectory and find the socket.io.jsfile, put it in your Cocos Creator project. I am here to put it assets\Script\libin

So far, the preparations are completed, start writing code

Code

Server

Here we use Node.JS build server.
Into the sio-serverfolder, create index.js, write a simple Web Socket server-based and Socket.io of Koa2.

// 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'); });

Then execute on the server root directory node index

❯ node index
listening on *:3000

The server build success

Creator project

I created a TS project preparation stage has been socket.io.jsput into the Hello TypeScript project, you need to Socket.io-Client TS Statement ( https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/socket.io -client / index.d.ts ) to download socket.io.jsthe folder and rename it to socket.io.d.tsthe next little to change it HelloWorld.tsto reference it.

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'); }); } }

operation result

NodeJS console output

user connected

Web Mobile Output

Socket connected

Author: R4M80
link: https: //www.jianshu.com/p/822d1a01b7df
Source: Jane book
Jane book copyright reserved by the authors, are reproduced in any form, please contact the author to obtain authorization and indicate the source.

Cocos Creator + longitudinal Socket.io JS / TS-end solutions