详解 Cocos Creator 如何使用websocket

前言

我在看B站cocos教程Cocos Creator零基础小白超神教程P69集遇到socketio无法正常使用的问题。经过百度，才了解到现在cocos creator实现客户端和服务器之间的双向通信是通过WebSocket 协议。WebSocket 是一种非常常用的网络通信协议，本文将详细讲解 Cocos Creator 如何使用 WebSocket，包括 WebSocket 的原理和 Cocos Creator 中的代码实现。

服务端

1.下载node.js,node.js下载链接(windows版本)
在这里插入图片描述
2.安装node.js,打开下载的安装包,一直点next即可

安装完成后,在命令行中输入

node -v

如果出现版本号,说明安装成功.如果没有出现版本号,可能是环境变量没有设置好,配置环境变量可以参考视频Cocos Creator零基础小白超神教程P67Socket
在这里插入图片描述
3编写服务端代码,并以JavaScript格式保存在桌面

//JavaScript服务端
//myserver.js
const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 30001 });
console.log( "server listen on 30001");
server.on('connection', (socket) => {
    console.log('New client connected!');

    socket.on('message', (message) => {
        console.log('Received message:', message);

        // 可以在此处处理收到的数据并发送回客户端
        socket.send('Server reply: ' + message);
    });

    socket.on('close', () => {
        console.log('Client disconnected!');
    });
});

4切换目录到桌面,运行服务端程序,可以看到服务端成功运行
在这里插入图片描述
5创建新的cocos creator项目
6创建新节点,新脚本(typescript),并且绑定,如图所示,我为了看的清楚,我创建了new node1,new script(typeScript),new node1与图片bg和脚本new script绑定

6编写客户端代码,代码连接连接服务端,连接成功后再控制台打印’WebSocket connected!',然后向服务端发送消息,鼠标点击节点,客户端可以继续向服务端发送消息

//tpyescript
cc.Class({
    extends: cc.Component,

    properties: {
        serverURL: 'ws://localhost:30001',
        socket: null,
    },

    // 初始化 WebSocket 连接
    initWebSocketConnection() {
        this.socket = new WebSocket(this.serverURL);

        this.socket.onopen = (event) => {
            console.log('WebSocket connected!');
            // 可以在此处发送初始数据到服务器
            this.sendWebSocketData("hello");
        };

        this.socket.onmessage = (event) => {
            console.log('Received message:', event.data);
        };

        this.socket.onerror = (error) => {
            console.error('WebSocket error:', error);
        };

        this.socket.onclose = (event) => {
            console.log('WebSocket closed:', event);
        };
    },

    // 发送数据到服务器
    sendWebSocketData(data) {
        if (this.socket && this.socket.readyState === WebSocket.OPEN) {
            this.socket.send(data);
        }
    },

    // 关闭 WebSocket 连接
    closeWebSocketConnection() {
        if (this.socket) {
            this.socket.close();
        }
    },

    // 开始时调用
    onLoad() {
        this.initWebSocketConnection();
    },

    start(){
        this.node.on(cc.Node.EventType.MOUSE_DOWN,(event)=>{
            this.onClickSendButton();
        });
    },

    // 点击按钮发送数据给服务器
    onClickSendButton() {
        let data = 'Hello, Server!';
        this.sendWebSocketData(data);
    },

    // 程序关闭时调用
    onDestroy() {
        this.closeWebSocketConnection();
    },
});

7运行结果,可以看到双方可以互相发送消息
在这里插入图片描述文章来源地址https://uudwc.com/A/mNxDv