5、websocket聊天室DEMO之广播

本是古典何须时尚 2022-05-16 07:15 188阅读 0赞

![70][]

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <input type="text" id="text">
        <button id="btn" type="button">发送</button>
        <script>
            /**
             * 这里我们创建一个WebSocket,里面填上服务端连接及端口号
             * ws 表示它的协议
             * 
             */
            var ws = new WebSocket('ws://localhost:2333');
    
            /**
             * 向服务端发送消息
             */
            ws.onopen = function(){
                document.getElementById('btn').onclick = function(){
                    ws.send(document.getElementById('text').value);
                }
            }
    
            /**
             * 接受服务端信息
             */
            ws.onmessage = function(e){
                var p = document.createElement('p');
                p.innerHTML = e.data;
                document.body.appendChild(p);
            } 
        </script>
    </body>
    </html>

app.js

/**
     * 服务端
     */
    
    /**
     * 1 将nodejs-websock包引进来
     */
    var ws = require('nodejs-websocket');
    
    /**
     * 2 创建一个WebSocket服务，建立TCP连接, 
     * conn就是连进来的连接
     * server 监听2333端口
     */
    var server = ws.createServer(function(conn){
    
        console.log('New connection'); // 表示新的连接进来了
        /**
         * conn绑一个text事件,并接受一个回调
         */
        conn.on('text', function(str){
            console.log(str);
            // 给客户端返回信息
            boardcast(str);
        });
    
        conn.on("error",function(err){
            console.log(err);
        });
    }).listen(2333);
    
    /**
     * 编写广播的方法
     */
    function boardcast(str){
        // connections包含所有的conn,即自己的和别人的都包含
        /**
         * 即先拿到所有的链接,给他做一个循环,这样就能拿到它得每一个对象
         */
        server.connections.forEach(function(conn){
            conn.sendText(str);
        });
    }

广播消息示例

![70 1][]

[70]: /images/20220516/0213acaef951401db6838e3bdfa68c50.png
[70 1]: /images/20220516/deae25fd1a7142c58b0e31d5fee71fb0.png