实现一个基本的WebSocket前后端数据交互功能

后端使用 nodejs 开发，使用到了nodejs-websocket 库

前端使用了 H5 原生的 WebSocket 功能

直接上代码

后端代码（backend.js）：

const ws = require('nodejs-websocket');

/**
 * 创建websocket服务端，返回一个socket连接
 * @param {number} port
 * @param {string} host
 * @returns {Promise}
 */
function run(port = 6868, host = 'localhost') {
    return new Promise((resolve) => {
        const server = ws.createServer((connection) => {
            console.log('检测到新的连接');
            resolve(connection);
        });

        server.listen(port, host);
    });
}

async function test() {
    let socket = await run();

    // 服务端主动发送信息
    socket.sendText('服务端发出的信息');

    // 服务端接收信息
    socket.on('text', (str) => {
        console.log(`服务端收到的信息：${str}`);
    });
}

test();

前端代码（frontend.html）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>

    <body>
        <script>
            /**
             * 创建websocket客户端，返回一个socket连接
             * @param {string} url
             * @returns {Promise}
             */
            function run(url) {
                return new Promise((resolve) => {
                    let socket = new WebSocket(url);
                    socket.addEventListener('open', () => {
                        console.log('创建连接成功');
                        resolve(socket);
                    });
                });
            }

            async function test() {
                let socket = await run('ws://localhost:6868');

                // 客户端主动发送信息
                socket.send('客户端发出的信息');

                // 客户端接收信息
                socket.addEventListener('message', (res) => {
                    console.log(`客户端收到的信息：${res.data}`);
                });
            }

            test();
        </script>
    </body>
</html>