写了一个在线五子棋对战游戏

日月无影

前一段时间迷上 Figma，上网搜了一圈 Figma 相关的资料，找到了联合创始人兼 CTO 的个人网站，看了两篇关于 Figma 如何处理多用户协作的文章，突然在想，同步肯定用的 websocket，要不用这玩意儿做个什么东西？
想来想去，似乎做个五子棋对战平台最简单，而我之前写过一个弱智的五子棋“AI”，可以把棋盘直接拿过来用，而且五子棋基本规则也最为简单。
Websocket 之前没用过，仅仅在了解的时候，把网上的那种简单示例在电脑上跑了一下，仅达到客户端与服务器通信的功能。好在 Websocket 的 API 简单明了，一看就知道怎么回事儿。经过一番折腾，终于弄出来了。页面用了 Vue.js，后台是 Node.js。
大概是这个样子




地址：在线五子棋对战
支持功能：双人对战、多人观战、房间密码、邀请等功能。
在实现上，每个桌位就是一个对象实例，将 Websocket 的连接 API 绑定到对象的方法上，特别是 onmessage 回调函数，会调用对象的一个方法，这个方法里定义所有接收信息后需要做的动作。
然后再创建一个管理对象，管理所有创建出来桌位实例，它负责桌位最终的展示与销毁，以及向客户端生成第一次载入时的信息。
当用户进入网站时，产生的信息（临时昵称、身份识别id，ws对象）会通过一个对象生成游客实例，实例内定义了作为游客身份时所能做的动作。所有的游客实例保存在管理对象的 guest 数组里。游客实例内的创建桌位方法会将用户的身份由游客变为桌位内的对战用户。
用户的每一个动作都必须通知其它的用户，比如创建桌位、进入房间、离开房间、设置密码、设置禁止观战等等。当一个动作在客户端执行，客户端将动作指令上传服务器，服务器在完成操作后，再将动作指令以广播的形式传递给所有用户。在实现上只需要 wss.clients.forEach 即可。
还有观战功能，游客实例被转移到桌位实例的观战列表内，桌位实例会将对战信息广播给所有的观战实例。
设置密码和禁止观战功能没什么好说的，需要注意的是，当管理员禁止观战以后，会踢出所有观战列表的用户，但如果用户是通过密码进入房间，则不会被踢出。
桌位实例内绑定两个用户，用户1和用户2，用户1默认是管理员，定义了所有的方法，比如设置密码、禁止观战、踢出用户2等。当用户1离开后，用户2会自动变为用户1。
通过写这个对战平台，让我对游戏服务器有了一点点认识。

絲絲

一直在看