node.js-前端通信

1、前端通信

ps:服务器总共分为两大类：web服务器和API服务器。

• ​ Node中的net模块提供的前端通信

  • server 服务器端代码：

    const net = require('net');
    const server = net.createServer();
    const host = 'localhost';
    const port = 9000;
    const objclient = {};
    let count = 0;
    
    //服务器连接客户端
    server.on('connection', (client) => {
        client.name = ++count;
        objclient[client.name] = client;
    
        //服务器端接收客户端传来的消息，输出在控制台。
        client.on('data', msg => {
            console.log(`客户端${client.name}说：` + msg.toString());
            //此时可以获取服务器端传过来的信息并输出。
            //问题：如果是多个服务器呢？
            // client.write(msg.toString());
            boardCaster(client, msg);
        });
    
        client.on('error', (error) => {
            console.log(error);
        });
        client.on('close', () => {
            delete objclient[client.name];
            console.log(`客户端${client.name}下线了`);
        })
    })
    
    
    server.listen(port, host, () => {
        console.log(`服务器运行在: http://${host}:${port}`);
    })
    
    //如果同时多个客户端连接这个服务器，那么此时我们就拥有了
    //一个对象objclient，需要遍历输出(广播)。
    function boardCaster(client, msg) {
        for (var key in objclient) {
            objclient[key].write(`客户端${client.name}说：${msg.toString()}`);
        }
    }
    

  • client 客户端代码：

    const net = require('net');
    //创建客户端
    const socket = net.Socket();
    const host = 'localhost';
    const port = 9000;
    const readline = require('readline');
    
    //客户端连接服务器端，将信息发送给服务器
    socket.connect(port, host, () => {
        socket.write('hello,我上线了');
        // say();//如果数据放在这里传输，只能传输一次。
    })
    //下一步需要实现的功能是，读取命令行发送给服务器端
    const rl = readline.createInterface({
        input: process.stdin,
        output: process.stdout
    });
    //此时需要通过一个事件将数据传给服务器。
    socket.on('data', msg => {
        console.log(msg.toString());
        say();
    })
    
    socket.on('error', (error) => {
        console.log(error);
    })
    
    socket.on('close', () => {
        console.log('客户端下线了');
    })
    
    function say() {
        rl.question('请输入：', (answer) => {
            if (answer === 'bye') {
                socket.destroy();
                rl.close();
            } else {
                socket.write(answer);
            }
        });
    }
    

• H5提供的 webSocket 【常用于移动端】

  • 1.创建一个服务器

    const express = require('express')
    const path = require('path')
    const app = express() // app对象的创建是为了绑定中间件 
    const port = 8000
    const host = '10.31.158.39'
    
    // 指定静态资源目录
    /* 
      问题： 如果不指定静态资源目录，那么express启动的服务器就认为
             /client/index.html 是一个路由
      解决： 指定静态资源目录
    */
    
    // console.log( __dirname ) // 当前文件所在的磁盘路径
    app.use(express.static(path.join(__dirname, 'client')))
    
    app.listen(port, host, () => {
        console.log(`服务器运行在: http://${host}:${port}`)
    })
    

  • 2.创建一个服务器端（用来通信）

    const WebSocket = require('ws') // 引入ws模块
    // const ws = new WebSocket( options ) options就是一个对象
    const ws = new WebSocket.Server({
        port: 5000,
        host: '10.31.158.39'
    })
    let count = 0
    const clients = {}
    
    ws.on('connection', client => {
        client.name = ++count
        clients[client.name] = client
        
        client.on('message', msg => { // 服务器通过message事件来接收客户端发来的信息
            // 这里是用的message事件
            console.log(`客户端${client.name}说：${msg}`)
            boardCaster(client, msg)
        })
    
        client.on('close', () => {
            delete clients[client.name]
            console.log(`客户端${client.name} 下线了`)
        })
    
    })
    
    function boardCaster(client, msg) {
        // 这里是用的send方法
        for (var key in clients) {
            clients[key].send(`客户端${client.name}说： ${msg}`)
        }
    }
    

  • 3.创建客户端

    const url = 'ws://10.31.158.39:5000'
    const ws = new WebSocket(url)
    ws.onopen = () => { //初次连接
        ws.send('我进入了xxx的直播间')
    }
    
    ws.onmessage = msg => {
        var content = document.querySelector('#content')
        console.log(msg)
        content.innerHTML += msg.data + '<br/>'
    }
    

    <body>
        <h1> 聊天室 </h1>
        <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
        <br />
        <div>
            <input type="text" id="msg" style="width: 200px;">
        </div>
        <button id="submit">提交</button>
        <script src="WsClient.js" charset="utf-8"></script>
        <script>
            const submit = document.querySelector('#submit');
            const msg = document.querySelector('#msg');
            submit.onclick = function () {
                ws.send(msg.value);
                msg.value = '';
            }
        </script>
    </body>