Cocos Creator实现广播消息功能:从设计到代码实现 | 南锋

南锋

南奔万里空,脱死锋镝余

Cocos Creator实现广播消息功能:从设计到代码实现

设计思路:

  1. 客户端与服务器建立一个长链接,用来接收服务器发过来的广播消息
  2. 创建一个队列,将接收到的广播消息添加到队列中
  3. 建立一个定时器,定期从队列中取出消息,并展示出来
  4. 展示方法:创建一个Label,Label为取出来的消息,然后克隆该Label节点,从右往左的进行移动,到移动到指定位置后,删除该节点。

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var messageQueue = []; // 创建一个空队列

ws.onmessage = function(event) {
var data = event.data;
console.log("Received data: " + data);
messageQueue.push(data); // 将接收到的消息添加到队列中
};

// 启动定时器,定期从队列中取出消息并进行处理
setInterval(function() {
if (messageQueue.length > 0) {
var data = messageQueue.shift(); // 从队列中取出一条消息
console.log("Processing data: " + data);
this._view._TextC_broadcast.string = data; //Label内容设置为从队列中取出来的消息
let broadMessage = instantiate(this._view._TextC_broadcast.node); //每次克隆一个Label
tween(broadMessage).to(broadTime*1.5, { position: new Vec3(x, 0, 0) }).call(()=>{ // 广播文字移动
broadMessage.destroy(); // 移动结束后删除该节点
}).start();
}
}, 1000); // 每秒处理一条消息
+