4、客户端给服务端发消息，服务端回复

小咪咪 2022-05-16 07:13 318阅读 0赞

![70][]

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);
            // 给客户端返回信息
            conn.sendText(str);
        });
    
    
    }).listen(2333);

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>

点击【调试】，启动调试，打开页面

![70 1][]

当我们关闭网页时会报错

![70 2][]

为此我们添加一个error事件

[70]: /images/20220516/3bfc146a6ad6499b93aae237fbf770b4.png
[70 1]: /images/20220516/958db7721ecd447e9d6531f664f073a5.png
[70 2]: /images/20220516/b9b0e55508fc4d58989832e715462a92.png