玩法收藏/云服务器/搭建多终端《你画我猜》Socket 服务器

这个真好玩，收录待用，修改转载已取得腾讯云授权

原理图

Git 地址
Demo 地址

需要条件
腾讯云服务器： 2 核 2GB
系统： CentOS 7

通过 Nginx 转发到 Nodejs 的 Socket.io 上，进行 Websocket 通信

服务端关键代码

// socket 监听的事件 io.on('connection', function(socket) { /** * 画者事件 drawPath * 传入 JSON ： data * 例： * { beginX: 68 beginY: 182 colorValue: "red" deviceHeight: 400 deviceWidth: 500 endX: 74 endY: 181 lineValue: 3 * } */ socket.on('drawPath', function(data) { /** * 广播事件 showPath * 将画者事件接收的 data 数据，向连接到 socket 服务器的客户端(猜者)进行广播 * 例： * socket.on('showPath', (data)=>{ // 自定义画的方法 this.drawing({json}); }); * */ socket.broadcast.emit('showPath', data); }); // 监听客户端的 socket.send(message)方法 socket.on('message', function(message){ // 画者生成一个随机的关键字 if(message == 'getKeyWord'){ INDEX = Math.floor(Math.random() * keyword.length); KEYWORD = keyword[INDEX]; // 将生成的关键字发送到画者的客户端 socket.emit('keyword', KEYWORD); // 画者清空画布 socket.send('clear') }else if(message == 'clear'){ // 猜者端清空画布 console.log('进来了'); socket.broadcast.emit('showBoardClearArea'); // socket.emit('showBoardClearArea'); }else if(message == 'success'){ // 猜对后，清空画布，更换词 io.sockets.emit('successClearArea'); } }); /** * 猜者提交 submit * 传入 str: keyword * * this.state.socket.emit('submit', keyword)} */ socket.on('submit', function(keyword) { // 标志位 var bingo = 0; // 提示 var tip = ''; // 如果 console.log(keyword); if(keyword && KEYWORD){ if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) { console.log('进来了 2'); bingo = 1; }else{ tip = tips[INDEX]; } }else{ bingo = -1; } console.log(bingo); console.log(tip); // 将 flag 标志位传到连接的客户端 socket.emit('answer', { bingo:bingo, tip:tip }); }); socket.on('disconnect', function() {}); }); 

注意： 因为是多端存在设备大小差异，经过讨论，根据比例进行计算，所以传入数据中有 deviceHeight 和 deviceWidth 。

{ "beginX":114, // 起点坐标(int) X "beginY":143, // 起点坐标(int) Y "colorValue":"red", // 线的颜色(str) (#FFA500 ， orange ， rgb(255, 165, 0)) "deviceHeight":400, // 设备高度(int) "deviceWidth":500, // 设备宽度(int) "endX":122, // 终止坐标(int) X "endY":149, // 终止坐标(int) Y "lineValue":3 // 线的宽度(int) } 

把这个 demo 完善，然后加到小程序，平时和朋友们一起玩不要太完美哈哈哈哈

原文来自：https://www.qcloud.com/community/article/585387001484793629