利用 socket.io 实现联机五子棋

废话开篇：之前写过一遍通过 canvas 绘制五子棋的小游戏，在此前的基础上添加联机对战的功能，顺便熟悉一下 socket.io 的使用方法

一、实现效果

手机与电脑联机

屏幕录制2022-03-24 上午10.57.40.gif

二、相关链接

本地js绘制五子棋：简单的 js 版单机五子棋 demo

socket.io 官网地址：socket.io

三、代码实现

1、node 服务端

所需依赖库：

{
"name": "wslscoket",
"version": "1.0.0",
"description": "scoket",
"main": "index.js",
"scripts": {
"test": "node ./index.js"
},
"author": "wsl",
"license": "ISC",
"dependencies": {
  "express": "^4.17.3",
  "express-static": "^1.2.6",
  "http": "^0.0.1-security",
  "socket.io": "^4.4.1"
 }
}

index.js 服务启动文件

var express = require('express')
var app = express()
var http = require('http').Server(app)
var io = require('socket.io')(http)

//公共页面访问设置
app.use(express.static('www'))

//链接进入监听
io.on('connection',function(socket){

  console.log('已链接')

  //返回会话ID
  socket.emit('connectioned',socket.id);

  //断开链接
  socket.on('disconnect', reason => {
    console.log('断开链接')
  });

  //接受邀请
  socket.on('invite',inviteObj => {
    socket.to(inviteObj.invited).emit('invited',inviteObj)
  })

  //落子接受
  socket.on('moveLaterSend',moveLaterObj => {
   //转发落子给对方
   socket.to(moveLaterObj.invited).emit('moveLaterComing',moveLaterObj)
  })
})

//开启服务
http.listen(3000,function(){
  console.log('开始对战吧')
})

启动服务

node ./index.js

2、前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="./wz.js" type="application/javascript"></script>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>

<style type="text/css">
 #canvas{
   background-color: aliceblue;
   margin-top: 50px;
   margin-left: 50px;
}
</style>

<body>
 <div>
  <canvas id="canvas" width="606" height="606"></canvas>
  <div style="float: left;color:red;top: 50px;left: 700px;position: absolute;" id="userName"></div>
  <input style="float: left;color:red;top: 80px;height: 25px;left: 700px;position: absolute;" placeholder="请输入对方ID" id="rivalInut"></input>
  <button style="float: left;color:red;top: 120px;height: 30px;width: 70px;background-color: burlywood;left: 700px;position: absolute;" onclick="beginAction()">开始</button>
 </div>
</body>

<script>
//绘制地图
window.$wzObj.initMap()
//链接服务
window.$wzObj.connect();
//邀请
function beginAction(){
  window.$wzObj.invited()
}
</script>
</html>

JS 新增部分代码

wzObj.piecesTypeIsBlack = true;//是否是黑子
wzObj.mineSocketId = null;//我的ID
wzObj.rivalID = null;//对手ID
wzObj.socket = null;//socket对象

//链接
wzObj.connect = function(){
wzObj.socket= io('http://10.10.60.20:3000');

//链接成功
wzObj.socket.on('connectioned',function(id){
  wzObj.mineSocketId = id;
  document.getElementById('userName').innerHTML = "臭棋篓子：" + wzObj.mineSocketId;
})

//被邀请
wzObj.socket.on('invited',function(inviteObj){
  alert('你被邀请了')
  wzObj.rivalID = inviteObj.invite;
  wzObj.piecesTypeIsBlack = false;
  document.getElementById('rivalInut').value = wzObj.rivalID
})

//对方落子
wzObj.socket.on('moveLaterComing',function(moveLaterObj){
  var { x ,y} = moveLaterObj;
  wzObj.draw(x,y);
  })
}

//邀请
wzObj.invited = function(){
  wzObj.rivalID = document.getElementById('rivalInut').value;
  if(!wzObj.rivalID){
  alert('请输入对方ID')
}

//邀请
wzObj.socket.emit('invite',{'invite':wzObj.mineSocketId,'invited':wzObj.rivalID})
}

//落子
wzObj.moveLater = function(x,y){
  wzObj.socket.emit('moveLaterSend',{'invite':wzObj.mineSocketId,'invited':wzObj.rivalID,x,y})
}

在绘制后进行发送落子消息

四、总结与思考

简单的联机五子棋对战就完成了，代码比较粗糙，主要是熟悉 socket.io，大神勿笑。理解思路编写demo比闷头苦读源码更容易接受新知识。