使用js向本机其他端口发送数据，并接受返回数据

2024-12-19 06:07:58 JS 1360

在JavaScript中，可以使用WebSocket或HTTP请求（例如使用fetch API）来向本机其他端口发送数据并接收返回数据。以下是详细步骤和示例。

1. 使用WebSocket

WebSocket提供了一个持久的连接，适合实时通信。

a. 创建WebSocket服务器

可以使用Node.js创建一个简单的WebSocket服务器：

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

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
    console.log('Client connected');

    socket.on('message', (message) => {
        console.log(`Received: ${message}`);
        // Echo the message back to the client
        socket.send(`Server received: ${message}`);
    });
});

运行上述代码后，WebSocket服务器将在8080端口监听。

b. 客户端JavaScript代码

在客户端使用WebSocket连接服务器并发送数据：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.onopen = () => {
            console.log('Connected to server');
            socket.send('Hello, Server!');
        };

        socket.onmessage = (event) => {
            console.log(`Received from server: ${event.data}`);
        };

        socket.onerror = (error) => {
            console.error(`WebSocket error: ${error}`);
        };
    </script>
</body>
</html>

2. 使用HTTP请求

如果不需要实时通信，可以使用HTTP请求（如fetch API）进行数据交互。

a. 创建HTTP服务器

可以使用Node.js创建一个简单的HTTP服务器：

javascript
// server.js
const http = require('http');

const server = http.createServer((req, res) => {
    let body = '';

    req.on('data', chunk => {
        body += chunk.toString(); // 将Buffer转为字符串
    });

    req.on('end', () => {
        console.log(`Received: ${body}`);
        res.end(`Server received: ${body}`);
    });
});

server.listen(8080, () => {
    console.log('Server running on port 8080');
});

b. 客户端JavaScript代码

使用fetch API向服务器发送数据并接收响应：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP Client</title>
</head>
<body>
    <script>
        fetch('http://localhost:8080', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: 'Hello, Server!' })
        })
        .then(response => response.text())
        .then(data => {
            console.log(`Received from server: ${data}`);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    </script>
</body>
</html>

3. 总结

在JavaScript中，可以使用WebSocket进行实时双向通信，或者使用HTTP请求（如fetch API）进行简单的数据交互。WebSocket适合需要持续连接的应用，而HTTP请求适合一次性的请求/响应交互。无论使用哪种方法，均可以有效地在本机不同端口之间发送和接收数据。