提个问题，关于tcp socket 和 http web 在Nodejs中的使用

提个问题，关于tcp socket 和 http web 在Nodejs中的使用

如何把tcp socket 的 定位器终端 经过 node 在 http web 界面里进行指令的收发通讯，找到了一个项目，估计要进行一定的修改，因为 tcp socket 无法在 http web 界面里进行通讯， https://github.com/uditalias/chat-nodejs

7 回复

提个问题，关于TCP Socket 和 HTTP Web 在Node.js中的使用

在开发过程中，我们经常需要处理不同的网络通信协议。例如，TCP Socket 通常用于实时数据传输，而 HTTP 则更常用于请求-响应模式的数据交换。本帖将探讨如何在 Node.js 中使用 TCP Socket 和 HTTP 协议，并通过一个简单的示例展示如何实现从 TCP Socket 接收数据并在 HTTP Web 界面上显示这些数据。

1. 使用 TCP Socket

首先，我们需要创建一个简单的 TCP 服务器来接收来自客户端的消息。以下是一个简单的示例：

// tcpServer.js
const net = require('net');

const server = net.createServer((socket) => {
    console.log('Client connected');
    
    socket.on('data', (data) => {
        console.log(`Received data: ${data.toString()}`);
        // 这里可以发送数据到 HTTP 服务器或其他地方
    });

    socket.on('end', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('TCP server is listening on port 3000');
});

2. 使用 HTTP Web 界面

接下来，我们需要创建一个 HTTP 服务器来接收来自 TCP 服务器的数据，并将其显示在 Web 界面上。我们可以使用 Express 框架来简化 HTTP 服务器的创建。

// httpServer.js
const express = require('express');
const app = express();
const port = 3001;

app.get('/', (req, res) => {
    res.send(`
        <html>
            <head><title>TCP Data Viewer</title></head>
            <body>
                <h1>TCP Data Viewer</h1>
                <div id="data"></div>
            </body>
        </html>
    `);
});

app.listen(port, () => {
    console.log(`HTTP server is listening on port ${port}`);
});

3. 实现数据转发

为了实现在 HTTP 界面上显示 TCP 数据，我们可以创建一个中间层，将 TCP 数据转发到 HTTP 服务器。这里我们可以使用 WebSocket 来实现实时通信。

// middleware.js
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3002 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        console.log(`Received message via WebSocket: ${message}`);
        // 将消息广播给所有连接的 WebSocket 客户端
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

4. 结合 TCP 和 HTTP

最后，我们需要将上述部分结合起来。我们可以在 HTTP 服务器中添加一个 WebSocket 客户端，用于接收 TCP 数据并将其显示在 Web 页面上。

// main.js
const express = require('express');
const app = express();
const port = 3001;
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3002 });

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        console.log(`Received message via WebSocket: ${message}`);
        // 广播消息给所有连接的 WebSocket 客户端
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

app.get('/', (req, res) => {
    res.send(`
        <html>
            <head><title>TCP Data Viewer</title></head>
            <body>
                <h1>TCP Data Viewer</h1>
                <div id="data"></div>
                <script>
                    const ws = new WebSocket('ws://localhost:3002');
                    ws.onmessage = function(event) {
                        document.getElementById('data').innerHTML += '<p>' + event.data + '</p>';
                    };
                </script>
            </body>
        </html>
    `);
});

app.listen(port, () => {
    console.log(`HTTP server is listening on port ${port}`);
});

以上示例展示了如何在 Node.js 中结合 TCP Socket 和 HTTP Web 界面进行数据传输。通过使用 WebSocket，我们可以在 HTTP 界面上实时显示来自 TCP Socket 的数据。


try inject socket.io into your web server and you will get the ability to real time control your tcp behaviors /

已经通过 net socket.io 两个模块 实现了 浏览器 到 tcp socket server 的数据发送， 详见：http://stackoverflow.com/questions/11967958/create-websockets-between-a-tcp-server-and-http-server-in-node-js

现有个简单问题：如下 index.html 问题，访问后会 发送 “For TCP” 到TCP socket，

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('httpServer', function (data) {
    console.log(data);
    document.write(data + "\r\n");
    socket.emit('tcp', "For TCP");
  });
</script>

但如何做成表单发送？send.html

<script language="javascript">
function getSelectValue(_myselect){
    var oForm = document.forms["myForm1"];
    //根据参数(下拉列表框的name属性值)获得下拉菜单项
    var oSelectBox = oForm.elements[_myselect];
    //判断是单选还是多选
    if(oSelectBox.type == "select-one"){
        var iChoice = oSelectBox.selectedIndex;    //获取选中项
        alert("单选，您选中了" + oSelectBox.options[iChoice].text);
    }
    else{
        var aChoices = new Array();
        //遍历整个下拉菜单
        for(var i=0;i<oSelectBox.options.length;i++)
            if(oSelectBox.options[i].selected)//如果被选中
              //压入到数组中
              aChoices.push(oSelectBox.options[i].text);
        //输出结果
        alert("多选，您选了：" + aChoices.join());
    }
}
</script>
<form method="post" name="myForm1">
<select id="mysel" name="mysel" multiple="multiple" style="height:60px;">
    <option value="a">AA</option>
    <option value="b">BB</option>
    <option value="c">CC</option>
</select>
<input type="button" onclick="getSelectValue('mysel')" value="查看选项" />

解决了

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

&lt;script&gt;
    $(function(){
        var iosocket = io.connect('http://www.youserver.com');  
        $(document).ready(function(){

$(“button”).click(function(){
iosocket.emit(‘tcp’, $("#test").val());
// iosocket.emit(‘tcp’, $("#test1").val());
});
});


    });
&lt;/script&gt;

</head>
<body>
<p>COMMAND:<input type=“text” id=“test” value=“thedatafromwebpage#”></p>
<p>COMMAND:<input type=“text” id=“test1” value="*HQAAAA"></p>
<button>send</button>
</body>


</html>

你好，能看下你server的js代码吗？

http://stackoverflow.com/questions/11967958/create-websockets-between-a-tcp-server-and-http-server-in-node-js 这里有。

要在Node.js中实现TCP Socket与HTTP Web界面之间的通讯，可以通过以下步骤来完成。首先，创建一个TCP服务器接收来自TCP客户端的消息，然后通过HTTP接口将这些消息转发给Web界面。

示例代码

1. TCP Server (监听TCP连接)

const net = require('net');

const server = net.createServer((socket) => {
    console.log('Client connected');
    
    socket.on('data', (data) => {
        console.log(`Received data: ${data.toString()}`);
        
        // 将数据发送到HTTP服务器
        client.write(data);
    });
    
    socket.on('end', () => {
        console.log('Client disconnected');
    });
});

server.listen(6000, () => {
    console.log('TCP server listening on port 6000');
});

2. HTTP Server (监听HTTP请求并转发TCP数据)

const express = require('express');
const app = express();
const port = 3000;

app.get('/send-message', (req, res) => {
    const message = req.query.message;
    
    if (!message) {
        return res.status(400).send('Message is required');
    }
    
    // 向TCP客户端发送消息
    client.write(message);
    res.send(`Message sent: ${message}`);
});

const client = net.createConnection({ port: 6000 }, () => {
    console.log('Connected to TCP server');
});

client.on('data', (data) => {
    console.log(`Data received from TCP server: ${data.toString()}`);
    // 返回给Web界面
    res.json({ message: data.toString() });
});

app.listen(port, () => {
    console.log(`HTTP server listening on port ${port}`);
});

解释

  1. TCP Server: 创建一个TCP服务器监听端口6000。当有客户端连接时，会读取客户端发送的数据，并将其转发到HTTP服务器。
  2. HTTP Server: 使用Express框架创建一个HTTP服务器，监听端口3000。当接收到/send-message路径的GET请求时，将请求参数中的message字段发送给TCP客户端，并返回确认信息。同时，HTTP服务器也监听TCP客户端发送的数据，并将其返回给Web界面。

通过这种方式，可以实现TCP Socket与HTTP Web界面之间的双向通信。

回到顶部