微信小程序websocket服务器怎么写,微信小程序websocket基于消息的开发模式

1.websocket简介

微信小程序原生websoceket接口，使用方便，调试简单，开发ws小程序非常方便。

但作者之前基于mine和netty开发很多年，对『基于消息的socket开发模式』情有独钟。故，在项目中简单封装了小程序原生websocket接口，使代码组织结构以消息为主线，围绕消息和消息的处理逻辑展开。可使代码思路清晰，解耦逻辑，方便维护。

// 代码逻辑组织结构，围绕消息展开，整个项目解耦清晰，扩展性好

Client.addMessageHandler('join_room',function(message){

// doSomething

})

Client.addMessageHandler('game_start',function(message){

// doSomething

})

2.原生微信小程序websocket用法

wx.connectSocket 连接服务器

wx.onSocketOpen 连接成功后回掉

wx.onSocketMessage 接收消息

wx.sendSocketMessage 发送消息

3.先封装一个简易通信协议

3.1简易协议v1.0

发送和服务器返回消息，包含cmd和body两个字段；

其中cmd字段表示消息要完成的操作类型，body字段包含本次操作的业务数据；

cmd必须有值，body字段可以为空

{cmd:'cmd_name',body:{}}

3.2先看一下封装后，基于消息的websocket使用方法

const Client = require('../../util/PKClient.js');

const Cmd = require('../../util/Cmd.js');

Page({

data: {

server_is_connect: false, // 服务器是否连接

join_room_ready: false, // 自己加入房间是否成功

player_is_ready: false, // 双方玩家是否就绪

},

onLoad: function (query) {

var that = this;

wx.showLoading({

title: '加入PK中...',

})

// ON_OPEN ==================================

Client.addEventHandler('onOpen', function (res) {

wx.hideLoading();

console.log('onOpen');

that.setData({

server_is_connect: true

})

Client.sendMsg(Cmd.cmdHello());

//加入房间

wx.showLoading({

title: 'PK准备中...',

})

var cmd = Client.cmdJoinRoom(query.room_id, that.data.my_info);

Client.sendMsg(cmd);

})

// ON_ERROR ==================================

Client.addEventHandler('onError', function (res) {

console.log('onError');

that.connectError();

that.errorExit('服务器错误' + res.errMsg);

})

// ON_CLOSE ==================================

Client.addEventHandler('onClose', function (res) {

that.connectError();

console.log('onClose');

})

// 以下全部是基于消息的开发，收到不同消息，做不同的处理

Client.addMessageHandler('hello', function (message) {

console.log('hell back @ ' + (new Date()));

})

// 对方要求重新开始游戏，收到消息后，界面上提示玩家

Client.addMessageHandler('restart_request', function (message) {

that.setData({

is_peer_request_restart: true

});

})

// 收到对方玩家掉线的消息

Client.addMessageHandler('peer_offline', function (message) {

Client.close();

that.errorExit('对方已掉线,PK结束');

});

// 客户端发送加入房间消息，服务器端回复

Client.addMessageHandler('join_room', function (message) {

/*

wx.hideLoading();

if (!message.body['result']) {

that.errorExit('好友正在PK中，你可以邀请其他好友PK');

Client.close();

} else {

that.setData({

join_room_ready: true

})

wx.showToast({

title: '加入房间成功',

})

}*/

});

// 服务器下发的双方全部就绪的消息，收到这个消息后，控制界面开始游戏

Client.addMessageHandler('ready_confirm', function (message) {

/*

var quiz = message.body['quiz'];

for (var i in quiz) {

quiz[i]['type_name'] = Api.getGarbageName(quiz[i]['type']);

}

that.setData({

is_peer_request_restart: false,

score: {},

game_over: false,

time: 0,

timeFormat: '0',

quiz: quiz,

quiz_id: 0,

showResult: false,

him_info: message.body['him_info'],

player_is_ready: true

});

that.data.setInter = setInterval(

function () {

that.setData({

time: that.data.time + 1,

timeFormat: that.formatTime(that.data.time + 1)

});

}

, 1000);

*/

});

Client.addMessageHandler('game_over', function (message) {

var r = message.body['result'];

that.gameOver(r);

});

// DO_CONNECT ==================================

// 以上消息回掉全部安装完毕了，连接服务器

Client.connect('wss://mini001.xxx.com/ws/server');

},

// 点击重新开始按钮，给服务器发送一个 要求重新开始的请求

// 服务器会广播到房间内其他玩家

onRestart: function () {

var cmd = Client.cmdRestartRequest();

Client.sendMsg(cmd);

}

},

// 收到对方玩家 再来一次 的消息，回应服务器

onRestartResponse: function () {

Client.sendMsg(Cmd.cmdRestartResponse());

},

// 选择答案，如果正确，提交服务器

onClickAnswer: function (e) {

var selectType = e.currentTarget.dataset.type;

var quiz = this.data.quiz;

var answer = quiz[this.data.quiz_id]['type'];

if (selectType != answer) {

wx.showToast({

title: '回答错误',

})

} else {

wx.showToast({

title: '回答正确',

})

Client.sendMsg(Cmd.cmdRight());

}

},)

// Cmd.js 生成简易协议文本

const getCmdStr = (cmd,body) => {

var openid = Login.getOpenId();

return JSON.stringify({cmd:cmd,openid:openid,body:body});

}

const cmdNewRoom = (my_info) => {

return getCmdStr('new_room',my_info);

}

const cmdJoinRoom = (room_id,my_info) => {

return getCmdStr('join_room', { id: room_id, my_info: my_info});

}

const cmdTxt = (room_id,txt) => {

return getCmdStr('send_txt',{txt:txt,room_id:room_id});

}

const cmdHello = (room_id, txt) => {

return getCmdStr('hello','');

}

const cmdRight = () => {

return getCmdStr('right', '');

}

const cmdRestartRequest = () => {

return getCmdStr('restart_request', '');

}

const cmdRestartResponse = () => {

return getCmdStr('restart_response', '');

}

module.exports = {

cmdNewRoom: cmdNewRoom,

cmdJoinRoom: cmdJoinRoom,

cmdTxt: cmdTxt,

cmdHello: cmdHello,

cmdRight: cmdRight,

cmdRestartRequest: cmdRestartRequest,

cmdRestartResponse: cmdRestartResponse

}

4.基于消息的微信小程序websocket开发

4.1核心API

4.1.1安装三种事件的回调函数，如果不关心这个事件也可以不安装

Client.addEventHandler('onOpen',function(){ });

Client.addEventHandler('onError',function(){ });

Client.addEventHandler('onClose',function(){ });

4.1.2安装消息回掉，即什么消息要怎么处理

Client.addMessageHandler('hello',function(message){})

Client.addMessageHandler('peer_offline',function(message){})

4.1.3 发起连接

Client.connect('ws://xxxx')

开发完成

5.Client.js封装代码

// Client.js

function json_decode(str) {

var p = new Promise(function (resolve, reject) {

var cc = JSON.parse(str);

resolve(cc);

});

return p;

}

let is_open = false;

let socketMsgQueue = [];

let heartbeatTimer = '';

let eventHandler = {

onOpen: false,

onError: false,

onClose: false

};

let messageHandler = {};

const addMessageHandler = (cmd, handler) => {

messageHandler[cmd] = handler;

}

const addEventHandler = (event, handler) => {

eventHandler[event] = handler;

}

const connect = (server_url) => {

wx.connectSocket({ url: server_url })

}

const close = (reason) => {

wx.closeSocket({ reason: reason });

}

const sendMsg = (msg) => {

console.log('send msg:' + msg);

if (is_open) {

wx.sendSocketMessage({

data: msg

})

} else {

socketMsgQueue.push(msg)

}

}

/**原生安装 */

wx.onSocketOpen(function (res) {

// 20s心跳，防止服务器端主动断开

heartbeatTimer = setInterval(function () {

sendMsg(cmdHello());

}, 20000);

console.log('wx.onSocketOpen', res);

is_open = true;

for (let i = 0; i < socketMsgQueue.length; i++) {

sendMsg(socketMsgQueue[i])

}

socketMsgQueue = []

if (eventHandler['onOpen']) {

eventHandler['onOpen'](res);

}

})

wx.onSocketMessage(function (res) {

console.log('wx.onSocketMessage', res);

json_decode(res.data).then(function (message) {

var cmd = message['cmd'];

if (messageHandler[cmd]) {

messageHandler[cmd](message);

} else {

console.log('cmd not handler', message);

}

}).catch(function (e) {

console.log("cmd parse faild", e);

console.log(e);

})

});

wx.onSocketClose(function (res) {

if (res.code == 1006) {

clearInterval(heartbeatTimer);

close('服务器端主动断开');

}

console.log('wx.onSocketClose', res);

if (eventHandler['onClose']) {

eventHandler['onClose'](res);

}

});

wx.onSocketError(function (res) {

clearInterval(heartbeatTimer);

console.log('wx.onSocketError', res);

if (eventHandler['onError']) {

eventHandler['onError'](res);

}

})

module.exports = {

connect: connect,

close: close,

sendMsg: sendMsg,

addMessageHandler: addMessageHandler,

addEventHandler: addEventHandler,

}