3、客户端给服务端发消息和服务端主动推送消息

雨点打透心脏的1/2处 2022-05-16 06:53 282阅读 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>
        <script>
            /**
             * 这里我们创建一个WebSocket,里面填上服务端连接及端口号
             * ws 表示它的协议
             * 
             */
            var ws = new WebSocket('ws://localhost:2333');
    
            /**
             * 当链接建立的时候,它有一个onopen事件
             */
            ws.onopen = function(){
                // 客户端发送信息给服务端
                ws.send('来自客户端的信息');
            }
            
            /**
             * 客户端接受服务端的消息
             */
            ws.onmessage = function(e){
                console.log(e.data);
            }
            
        </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);
        });
        /**
         * 等待5秒 主动给客户端推送一条消息
         */
        setTimeout(function(){
            // 给客户端发送消息
            conn.sendText('来自服务端的消息');
        },5000);
    
    }).listen(2333);

运行程序，点击【调试】，【启动调试】

![70 1][]

打开页面，等等5秒

![70 2][]

[70]: /images/20220516/0ea5cdc3dab34e79a5c7b7d5ddff0a5b.png
[70 1]: /images/20220516/a7e9709374a341a5988a6d8f1f14b0bd.png
[70 2]: /images/20220516/2db389c8604d4258a0f8cdc2c847bacf.png