前端通信方案

最新推荐文章于 2024-05-08 13:29:48 发布

原创最新推荐文章于 2024-05-08 13:29:48 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

node 专栏收录该内容

5 篇文章

订阅专栏

前端通信

通信有两个端
服务端
客户端

Node.js中提供的通信方案

服务端代码


const net = require('net')

const PORT = 5000

let count = 0 


const clients = {}


const server = net.createServer()


server.on('connection', (client) => { 
  
    client.name = ++count

    clients[client.name] = client

    client.on('data', (msg) => { 
        console.log(`客户端${ client.name  }说： ${ msg.toString() }`);
        
        boardCast(msg.toString()); 
    })

    client.on('error', (error) => {
        console.log(error)
    })

    client.on('close', () => {
        console.log(`客户端${ client.name }下线了`)
        delete clients[client.name]
    })
})


function boardCast(msg) {
    for (var key in clients) {
        clients[key].write(`客户端${ key }说：${ msg }`);
    }
}


server.listen(PORT)

客户端代码

const net = require('net')

const readline = require('readline')

const socket = new net.Socket()

const PORT = 5000

const HOST = '127.0.0.1'

socket.connect(PORT, HOST, () => {
    socket.write('我上线了')
})

socket.on('data', msg => {
   
    console.log(msg.toString()) 
    say();
})

socket.on('error', () => {
    console.log(error)
})

socket.on('close', () => {
    console.log('下线了')
})

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

function say() {
    rl.question('请输入：', (answer) => {


        if (answer === '886') {
            socket.destroy()
            rl.close()
        } else {
            socket.write(answer); 
        }
    });
}

H5提供的通信方案

聊天室案例：
创建客户端的界面

<!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>WebSocket</title>
    <script src="./socketClient.js"></script>
</head>
<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>
</body>
<script>
    var submit = document.querySelector('#submit')
    var msg = document.querySelector('#msg')
    submit.onclick = function() {
        var val = msg.value
        ws.send(val); 
        msg.value = '';
    }
</script>
</html>

搭建静态服务器启动html文件

const express = require('express')

const app = express()

const PORT = 5000; 

const HOST = '10.31.153.43'

const path = require('path')

app.use(express.static(path.join(__dirname, 'client')))
app.get('/', (req, res, next) => {
    res.send('你好')
})

app.listen(PORT, HOST, () => {
    console.log(`客户端服务器运行在：http://${ HOST }:${ PORT }`)
})

通信的服务端


const WebSocket = require('ws'); 

const server = new WebSocket.Server({
    port: 8000,
    host: '10.31.153.43'
})

const clients = {}

let count = 0

server.on('connection', client => {
    client.name = ++count
    clients[client.name] = client
    client.on('message', msg => {
        console.log(msg)
        borderCast(msg)
    })
    client.on('close', () => {
        console.log(`客户端${ client.name }下线了`)
        delete clients[client.name]
    })
})

function borderCast(msg) {
    for (var key in clients) {
        clients[key].send(`客户端${ key }说： ${ msg }`)
    }
}

通信的客户端

const ws = new WebSocket('ws://10.31.153.43:8000'); 

ws.onopen = () => {
    ws.send('欢迎xxx来到xxx的直播间');
};

ws.onmessage = (msg) => { 
    var content = document.querySelector('#content');
    content.innerHTML += msg.data + '<br/>'
}