【记录】利用 websocket 搭建一个广播程序

最新推荐文章于 2024-04-28 15:23:38 发布

或许不该一蹴而就

最新推荐文章于 2024-04-28 15:23:38 发布

阅读量289

点赞数

文章标签： websocket 前端 javascript

本文链接：https://blog.csdn.net/m0_50823463/article/details/128502247

版权

【记录】利用 websocket 搭建一个广播程序

创建app.js,作为服务端

var ws = require("nodejs-websocket")

// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
    // 接受客户端消息
    conn.on('text', (str) => {
        // 向客户端发送消息
        // conn.send("来自服务端的消息:" + str + "!!!")
        // 广播，向每一个连接发送消息
        server.connections.forEach(conn=>{
            conn.send("来自服务端的消息:" + str + "!!!")
        })
    })


    // 处理异常
    conn.on('error', (err) => {

    })
}).listen(2333)

index.html,作为客户端

<body>
    <input type="text" id="input"><button id="btn">发送</button>
    <div></div>
    来自服务端的数据：
    <div id="cont">

    </div>
    <script>
        let ws = new WebSocket("ws://localhost:2333")
        // 客户端向服务端发送消息
        ws.addEventListener('open', function (event) {
            btn.onclick = ()=>{
                ws.send(input.value);
            }
            
        });
        // 接受服务端消息
        ws.addEventListener('message', function (event) {
            console.log(event.data);
            let div = document.createElement('div')
            div.innerText = event.data
            cont.append(div)
        });
    </script>
</body>