【微信小游戏】微信对战小游戏知识储备
一、前提
在微信小游戏异常火爆的前提下，开发个小游戏才是正事，而不是玩个小游戏才是正事！
废话不多说，步入今天的正题，在慢慢成熟起来的小游戏生态中我们的小游戏如果只是单机+排行的组合，难免显得小游戏单调，乏味。今天我们就来尝试下联网操作。
二、准备
工具：cocos creator
版本：v1.9.1
语言：JavaScript，开源库onfire.js
介绍：我们主要通过WebSocket来实现客户端跟服务器的交互，服务器用Node.js，技术自己选，按照自己擅长的语言。
三、实战
客户端
1、新建场景Login，场景中包含三个按钮，两个文本。按钮分别是建立连接、发送数据，关闭连接。文本分别是显示发送数据和接收数据。绑定事件，绑定脚本就不再多说了。
Login.js代码如下：
cc.Class({ extends: cc.Component, properties: { lbl_sendMsg: { default: null, type: cc.Label, tooltip: "发送的数据" }, lbl_responseMsg: { default: null, type: cc.Label, tooltip: "接收的数据" }, }, start () { this.netControl = require('NetControl'); }, // 打开连接 onOpenSocket(){ console.log("连接完成"); }, // 接收服务器返回的数据 onMessage(obj){ console.log("It's HelloWorld onMessage----->"+ obj.data ); this.lbl_responseMsg.string = obj.data; var responseData = JSON.parse(obj.data); console.log("消息协议号："+responseData.MsgId); }, // 关闭 WebSocket 连接 onCloseSocket(){ console.log("关闭连接" + new Date().getTime()); }, // 销毁事件注册 onDestroy(){ onfire.un(this.openSocket); onfire.un(this.msssageFire); onfire.un(this.closeSocket); }, btnSocketOpen(){ console.log("开始连接"); this.netControl.connect(); this.openSocket = onfire.on("onopen",this.onOpenSocket.bind(this)); }, btnSocketSend(){ // console.log("socket send!!! "); this.msssageFire = onfire.on("onmessage",this.onMessage.bind(this)); var jsonTmp = "{ \"MsgId\": 1001, \"Name\": \" + \"知心购物\" + \", \"QQGroup\": \"" + 418177552 + "\" }"; this.netControl.send(jsonTmp); //发送的数据 this.lbl_sendMsg.string = jsonTmp; }, btnSocketClose(){ this.closeSocket = onfire.on("onclose",this.onCloseSocket.bind(this)); //关闭：包含主动关闭连接和服务器关闭连接 this.netControl.close(); }, // update (dt) {}, });
2、NetConfig.js代码如下
/** * 当前的网络配置 */ module.exports={ host:"ws://localhost", port:3000 };
3、NetControl.js代码如下
//定义全局的变量 window.onfire = require("onfire"); //处理事件的类库 var netConfig = require('NetConfig'); var NetControl = { _sock:{}, //当前的webSocket的对象 connect: function () { if(this._sock.readyState !==1){ //当前接口没有打开 //重新连接 this._sock = new WebSocket(netConfig.host+":"+netConfig.port); this._sock.onopen = this._onOpen.bind(this); this._sock.onclose = this._onClose.bind(this); this._sock.onmessage = this._onMessage.bind(this); } return this; }, // 关闭连接 close: function(){ if (this._sock.readyState ===1) { this._sock.close(); } }, _onOpen:function(){ onfire.fire("onopen"); }, _onClose:function(err){ onfire.fire("onclose",err); }, _onMessage:function(obj){ onfire.fire("onmessage",obj); }, send:function(msg){ this._sock.send(msg); console.log("send msg"+msg); }, }; module.exports=NetControl;
4、onfire.js代码如下
/** * Created by Administrator on 2018/4/17 0017. */ /** Copyright (c) 2016 hustcc http://www.atool.org/ License: MIT https://github.com/hustcc/onfire.js **/ /* jshint expr: true */ !function (root, factory) { if (typeof module === 'object' && module.exports) module.exports = factory(); else root.onfire = factory(); }(typeof window !== 'undefined' ? window : this, function () { var __onfireEvents = {}, __cnt = 0, // evnet counter string_str = 'string', function_str = 'function', hasOwnKey = Function.call.bind(Object.hasOwnProperty), slice = Function.call.bind(Array.prototype.slice); function _bind(eventName, callback, is_one, context) { if (typeof eventName !== string_str || typeof callback !== function_str) { throw new Error('args: '+string_str+', '+function_str+''); } if (! hasOwnKey(__onfireEvents, eventName)) { __onfireEvents[eventName] = {}; } __onfireEvents[eventName][++__cnt] = [callback, is_one, context]; return [eventName, __cnt]; } function _each(obj, callback) { for (var key in obj) { if (hasOwnKey(obj, key)) callback(key, obj[key]); } } /** * onfire.on( event, func, context ) -> Object * - event (String): The event name to subscribe / bind to * - func (Function): The function to call when a new event is published / triggered * Bind / subscribe the event name, and the callback function when event is triggered, will return an event Object **/ function on(eventName, callback, context) { return _bind(eventName, callback, 0, context); } /** * onfire.one( event, func, context ) -> Object * - event (String): The event name to subscribe / bind to * - func (Function): The function to call when a new event is published / triggered * Bind / subscribe the event name, and the callback function when event is triggered only once(can be triggered for one time), will return an event Object **/ function one(eventName, callback, context) { return _bind(eventName, callback, 1, context); } function _fire_func(eventName, args) { if (hasOwnKey(__onfireEvents, eventName)) { _each(__onfireEvents[eventName], function(key, item) { item[0].apply(item[2], args); // do the function if (item[1]) delete __onfireEvents[eventName][key]; // when is one, delete it after triggle }); } } /** * onfire.fire( event[, data1 [,data2] ... ] ) * - event (String): The event name to publish * - data...: The data to pass to subscribers / callbacks * Async Publishes / fires the the event, passing the data to it's subscribers / callbacks **/ function fire(eventName) { // fire events var args = slice(arguments, 1); setTimeout(function () { _fire_func(eventName, args); }); } /** * onfire.fireSync( event[, data1 [,data2] ... ] ) * - event (String): The event name to publish * - data...: The data to pass to subscribers / callbacks * Sync Publishes / fires the the event, passing the data to it's subscribers / callbacks **/ function fireSync(eventName) { _fire_func(eventName, slice(arguments, 1)); } /** * onfire.un( event ) -> Boolean * - event (String / Object): The message to publish * When passed a event Object, removes a specific subscription. * When passed event name String, removes all subscriptions for that event name(hierarchy) * * Unsubscribe / unbind an event or event object. * * Examples * * // Example 1 - unsubscribing with a event object * var event_object = onfire.on('my_event', myFunc); * onfire.un(event_object); * * // Example 2 - unsubscribing with a event name string * onfire.un('my_event'); **/ function un(event) { var eventName, key, r = false, type = typeof event; if (type === string_str) { // cancel the event name if exist if (hasOwnKey(__onfireEvents, event)) { delete __onfireEvents[event]; return true; } return false; } else if (type === 'object') { eventName = event[0]; key = event[1]; if (hasOwnKey(__onfireEvents, eventName) && hasOwnKey(__onfireEvents[eventName], key)) { delete __onfireEvents[eventName][key]; return true; } // can not find this event, return false return false; } else if (type === function_str) { _each(__onfireEvents, function(key_1, item_1) { _each(item_1, function(key_2, item_2) { if (item_2[0] === event) { delete __onfireEvents[key_1][key_2]; r = true; } }); }); return r; } return true; } /** * onfire.clear() * Clears all subscriptions **/ function clear() { __onfireEvents = {}; } return { on: on, one: one, un: un, fire: fire, fireSync: fireSync, clear: clear }; });
服务器
1、app.js代码如下
var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: 3000 }); wss.on('connection', function (ws) { console.log('client connected'); ws.on('message', function (message) { console.log("接受消息"); console.log(`[SERVER] Received: ${message}`); // ws.send(`ECHO: ${message}`, (err) => { ws.send(`{"MsgId":1001, "Name":"微信搜索知心购物小程序"}`, (err) => { if (err) { console.log(`[SERVER] error: ${err}`); } }); }); });
2、package.json
"dependencies": { "websocket": "^1.0.26", "ws": "1.1.1" }
3、通过npm install 安装依赖，通过 node app.js 开启服务器
四、效果
1、建立连接：
服务器：服务器执行打印，输出client connected!
客户端：客户端连接成功后，执行回调this.openSocket注册的函数，进打印操作。
2、发送数据：
服务器：服务器打印收到的数据。
客户端：客户端显示服务器返回的数据。
3、关闭连接：
客户端：点击关闭连接后，执行我们的回调，打印关闭连接； 此时如果再次点击发送数据，则会报 not open 错误
至此，整个的网络流程已完成。
五、思考
1、WebSocket最基本的网络连接，网络请求，网络关闭。
2、应用到游戏中远不止这些可以满足，至少有心跳机制，断线重连机制；
3、玩家之间如何随机匹配对战，好友之间如何1V1匹配对战。
4、WebSocket中不使用Json数据，而使用Protobuf数据。
5、更多问题，欢迎加群讨论学习，QQ群：418177552
