CocosCreator基于websocket实时对战开发方案

随着4G/5G技术的普及，互联网通信的延迟越来越低。实时对战游戏迎来了春天。从最早的CS, 到现在的王者荣耀，吃鸡等，通过互联网构建多人在线实时对战的游戏，大大提高了游戏的趣味性。今天我们就来看看在CocosCreator框架下如何实现即时通讯。
用到的技术还是websocket, 它是通过对Http协议的扩展来实现长连接的。可以发送二进制数据。访问以ws或者wss(加密)开头加url的方式。例如: ws://huoshishanxin.com/websocketest/1。想详细了解的同学可以戳链接：https://www.runoob.com/html/html5-websocket.html
好了， 话不多说。咱们开始撸代码。我们要实现的效果呢，就是在地图上有两个玩家，每个人可以控制自己在地图上随意走动，并且通过点击目标位置来发射弓箭。弓箭射中对方，对方掉血。
搭建项目结构的不多说了，准备好相关的资源，以及实现本地玩家自己控制自己的移动。最后代码架构如下：

Websocket部分在GameControll.js中，界面上方有个输入框和登录按钮，输入用户的身份，点击登录。在这时候去建立socket连接。

Onopen是打开连接，如果打开失败则会出发onerror.
在onmessage中处理接收到的消息，因为其他玩家的消息都是通过这个接口接收的。我们规定数据的格式是坐标，包含x, y的信息的。所以这里先做个粗糙的判断啦。 以后正式需要开发的时候，必须严格进行格式的定义。 比如通过增加code字段来划分各种不同的命令。这里我们接收到移动的位置数据后转化成v2坐标，再控制当前玩家的位置，就可以实现实时的移动了。这段代码最后设置了全局变量ws, 这是为了后面使用它来发送位置的。请看下面代码：

在这里我们给move（移动控制板）增加监听，设置目标位置。

再在update的函数中更新本地位置时，通过websocket发送出去。注意要转化成string哦。结合上面接收onmessage处理的部分，实现起来是不是很简单啊。
需要了解服务器websocket的实现，可以接着看。
服务器是java开发的，使用了springboot框架，基于spring-websocket来实现。需要配置websocket。

在WebSocketServer中定义访问的url。我们把用户id放在了url上，便于获取。

建立连接时，把当前用户身份加入全局map中，方便后面查找。

接收到消息，需要转发给当前游戏中的其他玩家。

这样前后端连接起来，就可以实现实时对战啦。
代码下载请移步火石闪信官网：http://www.huoshishanxin.com/techShareDetail002.html， 最下方有下载地址。