Node.js多台局域网内设备联动总体思路和关键实现

AspirinZero

已于 2023-03-18 09:25:02 修改

阅读量581

点赞数

文章标签： node.js 服务器前端

于 2023-03-17 18:06:50 首次发布

本文链接：https://blog.youkuaiyun.com/AspirinZero/article/details/129623831

版权

本文介绍了如何利用Node.js构建一个本地后台，在局域网环境中实现一台服务器与两台客户端的互动。服务器通过配置JSON来区分不同的客户端，并在React前端获取服务器IP以进行数据交互。当服务器发送数据时，会根据IP识别目标客户端，客户端通过监听事件来接收并更新展示的内容。

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

Node.js多台局域网内设备联动，一台服务器，两台客户端

前言

要求：需要一台服务器。两台客户端，点击服务器的按钮给客户端发送数据，同时两台机器要做区分，点击按钮发送到对应的主机。

提示：以下是本篇文章正文内容，下面案例可供参考

一、配置思路

用node.js做本地后台，在本地的配置json中做服务器和客户端页面区分的配置：show，做两个客户端区分的配置：isOutset，，
客户端配置ip字段：”服务端ip地址“
在这里插入图片描述
服务器serverip字段配置两个客户端的IP地址：

二、数据发送思路

1.做本地后台，使用node

代码如下（示例）：
 服务器将本地ip写入数据的链接中，客户端加载页面时获取该接口数据（在react前端写）
>const server = express();
server.get("/api/list", (req, res) => {
    let host="http://"+ip.address()+":8011"
    //拿到本机ip
    let data = DataManager.getData({
        key: "data"
    })
    data = JSON.parse(JSON.stringify(data))
    res.send({
        code: 0,
        data: data.filter(v=>v.isOutset ===Number(req.query.type)).map(v => {
            v.images = v.images.map(v => host + v)
            v.url = host+v.url
            v.html = v.html.replace(
                /(src=\"(\S*)\")/gi,
                (a, b, c) => {
                    return `src="${host+c}"`;
                }
            );
            return v
        })
    });
});

2.读入数据

代码如下（示例）：

// 接收服务端地址/api/list接口发送的数据
        get('http://' + serverip + ":8011/api/list?type="+type).then(result => {
            this.setState({ data:result.data, content: result.data[0] })
        }).catch(err => {
            this.setData()
        })

该处使用的url网络请求的数据。

//服务端向客户端发送数据，用ip对客户端识别，发送到指定的客户端。此ip是serverip中的ip
 post("http://"+this.props.ip + ":8011/send", this.props.children[index])

后台识别转发给前台

 servers.on("send", (option) => {
      if(win)win.webContents.send("one", option)
    })


···
//客户端识别
```c
     // 将当前展示的数据更新为点击的数据
            window.electron.on("one", (data) => {
                let content = this.state.data.find(v => v.id === data.id && v.isOutset === data.isOutset) 
                this.setState({ content: null })
                setTimeout(() => {
                    this.setState({
                        content
                    });
                }, 5);
                
            }) 
   
# 总结
未完待续