使用Node实现前端通信

最新推荐文章于 2025-06-25 00:40:00 发布

原创最新推荐文章于 2025-06-25 00:40:00 发布 · 476 阅读

CC 4.0 BY-SA版权

本文探讨了如何使用Node.js的net模块进行前端通信，并介绍了H5中的WebSocket协议，尤其适用于移动端。通过实例，展示了创建简单聊天室的过程，包括HTML结构、WebSocket服务器和静态服务器的设置。此外，还提到了WebSocket协议的安全版本wss及其在TLS上的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端通信(socket)

Node中的net模块提供的前端通信
H5提供的 webSocket 【常用于移动端】
pc端低版本浏览器使用 socket.io

服务端：一个总的服务器例： QQ的服务器（一个整体）

客户端：单个用户使用应用例：每个人的QQ（多个）

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

业务：客户端现在要在终端输入内容，然后回车发送内容给服务器

解决： Node中提供了一个叫做 readline 的模块用于读取命令行内容【单行读取】

*使用Node创建服务器

//总服务器
//此文件名server.js
const net = require('net'); //引入net模块

const server = net.createServer(); //创建服务器

const host = 'localhost'; //创建域名 

const port = 6868; //创建端口号

const clients = {};

let count = 0;


//服务器连接客户端
server.on('connection', (client) => { //服务器通过connection连接客户端

    client.name = ++count; //计数，给每一个客户端起名

    clients[client.name] = client; //将每一个客户端放入clients中储存起来

    //服务器接收信息
    client.on('data', msg => {
    //服务器通过data事件来接收，客户端发过来的信息；msg 就是客户端发来的信息 ， msg这个信息是二进制
        console.log(`客户端${client.name}说：${msg.toString()}`);
        boardCaster(client, msg);
    });


    //服务器错误报出处理
    client.on('error', error => { // 服务器处理错误报出
        console.log('error is: ' + error);
    });

    //服务器正常下线
    client.on('close', () => { // 服务端接收客户端正常下线行为

        delete clients[client.name]; // 从存储client的地方删除下线的客户端

        console.log(`客户端${client.name}下线了`);
    });

});


//广播
// 广播就是将所有的客户端以及客户端发来的信息展示在服务端界面上
function boardCaster(client, msg) {
    for (var key in clients) {
        clients[key].write(`客户端${client.name}说:${msg.toString()}`); //写信息在服务端
    }
}


//监听服务器
server.listen(port, host, () => {
    console.log(`服务器运行在：http://${ host }:${ port }`);
})

*创建客户端


//此文件名 client.js

const net = require('net'); //引入net模块，用于创建服务器

const socket = net.Socket(); //创建客户端

const host = 'localhost'; //创建域名

const port = 6868; //创建端口

const redline = require('readline'); //引入raadline模块，读取命令行


//客户端连接服务器
socket.connect(port, host, () => {
    socket.write('你好，我上线 了'); //将信息发送给服务器
});

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

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

socket.on('error', (error) => { //处理错误报出
    console.log('error is : ' + error)
})

socket.on('close', () => { // 客户端正常下线
    console.log(`客户端下线了`)
})

function say() {
    rl.question('请输入：', (answer) => {
        if (answer === 'bye') {
            //表示正常下线 
            socket.destroy() // 客户端销毁
            rl.end() // rl 读取命令行关闭
        } else {
            //表示正常聊天
            socket.write(answer)
        }
    });
}

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

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

由于WebSocket是一个协议，服务器具体怎么实现，取决于所用编程语言和框架本身。Node.js本身支持的协议包括TCP协议和HTTP协议，要支持WebSocket协议，需要对Node.js提供的HTTPServer做额外的开发。已经有若干基于Node.js的稳定可靠的WebSocket实现，我们直接用npm安装使用即可。

创建一个简单的聊天室

此为文件目录：

在这里插入图片描述

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>WebSocket</title>
</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> -->
    <script src="weblianjie.js" charset="utf-8"></script>
    <script>
        var submit = document.querySelector('#submit');
        var msg = document.querySelector('#msg');
        document.onkeyup = function(e) {
            if (e.keyCode === 13) {
                ws.send(msg.value);
                msg.value = '';
            };
        };
    </script>
</body>

</html>

通讯端连接服务器 weblianjie.js代码如下：


const url = 'ws://10.31.158.64:8899';

const ws = new WebSocket(url);

ws.onopen = () => { //初次连接
    ws.send('刘姥姥初入大观园');
};

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

创建静态服务器，app.js代码如下：

const express = require('express'); //引入express

const path = require('path'); //引入path

const app = express();

const port = 9678;

const host = '10.31.158.64';

//指的静态资源目录
app.use(express.static(path.join(__dirname, 'htmljs')));

app.listen(port, host, () => {
    console.log(`服务器运行在：http://${ host }:${ port }`);
});

通信服务器创建，wsServer.js代码如下：


const WebSocket = require('ws'); //创建通信的服务器

const ws = new WebSocket.Server({
    port: 8899,
    host: '10.31.158.64'
});

let count = 0;

const clients = {};

ws.on('connection', client => {

    client.name = ++count; //给每个客户端命名

    clients[client.name] = client; //每个客户端输入的信息储存在clients中

    //客户端输入的信息

    client.on('message', msg => {
        //服务器通过message事件来接收客户端发来的信息
        console.log(`客户端${ client.name}说：${msg}`);
        boardCaster(client, msg);
    });

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

});

//监听服务器
function boardCaster(client, msg) {
    for (var key in clients) {
        clients[key].send(`客户端${ client.name }说：${ msg }`);
    };
};

注：在引入 express,ws 需通过 npm 下载。

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。

ws://example.com/wsapi
wss://secure.example.com/

注：在引入 express,ws 需通过 npm 下载。

Websocket 使用 ws 或 wss 的统一资源标志符，类似于 HTTPS，其中 wss 表示在 TLS 之上的 Websocket。

ws://example.com/wsapi
wss://secure.example.com/

使用Node实现前端通信

前端通信(socket)

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

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

创建一个简单的聊天室

HTML结构实现代码如下：

通讯端连接服务器 weblianjie.js代码如下：

创建静态服务器，app.js代码如下：

通信服务器创建，wsServer.js代码如下：