双向通讯解决方案

双向通讯解决方案

短轮询

function pollServer() {
  fetch('/api/updates')
  .then(response => response.json())
  .then(data => {
    // 处理从服务器返回的数据
    console.log(data);
    // 继续轮询
    setTimeout(pollServer, 5000);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
    // 继续轮询
    setTimeout(pollServer, 5000);
  });
}

// 启动轮询
pollServer();

长轮询

const http = require('http');

function longPolling(req, res) {
  // 模拟异步操作，随机时间后返回数据
  setTimeout(() => {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ data: 'Hello, world!' }));
  }, Math.floor(Math.random() * 20000)); // 随机时间 0~20s
}

http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/api/updates') {
    longPolling(req, res);
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not found');
  }
}).listen(3000, () => {
  console.log('Server listening on port 3000');
});

使用iframe实现双向通讯

<!-- 在HTML页面中插入一个隐藏的iframe -->
<iframe id="my-iframe" style="display:none;"></iframe>

<script>
  // 获取iframe元素
  const iframe = document.getElementById('my-iframe');

  // 定义处理消息的回调函数
  function handleMessage(event) {
    // 处理从服务器返回的数据
    console.log(event.data);
  }

  // 添加消息事件监听器，监听postMessage
  window.addEventListener('message', handleMessage);

  // 向服务器发送请求
  iframe.src = '/api/updates';
</script>

const http = require('http');

function handleRequest(req, res) {
  // 检查请求是否来自iframe
  if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // 插入脚本以更新应用程序
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end('<script>window.parent.postMessage({ data: "Hello, world!" }, "*");</script>');
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end('Not found');
  }
}

http.createServer(handleRequest).listen(3000, () => {
  console.log('Server listening on port 3000');
});

使用SSE实现双向通讯

const eventSource = new EventSource('/api/updates');

eventSource.addEventListener('ping', function(data){
    // 处理从服务器返回的数据
	  console.log(event.data);
})

eventSource.onerror = function(error) {
  // 处理错误
  console.error(error);
};

1. event，消息类型

2. id ，消息的ID

3. data 消息的数据字段。 客户端会把这个字段解析为字符串，如果一条消息有多个 data 字段，客户端会自动用换行符 连接成一个字符串。

4. retry，指定客户端重连的时间。只接受整数，单位是毫秒。如果这个值不是整数则会被自动忽略。

const http = require("http");
const path = require("path");
const fs = require("fs");

http.createServer((req, res) => {
	if (req.url === "/events" && (req.headers.accept && req.headers.accept === 'text/event-stream')) {
		res.setHeader("content-type", "text/event-stream");  // 告诉浏览器使用事件流
		setInterval(() => {
			res.write("event: ping\n"); // 事件类型
			res.write(`id: ${+new Date()}\n`); // 消息 ID
			res.write("data: 7\n"); // 消息数据
			res.write("retry: 10000\n"); // 重连时间
			res.write("\n\n"); // 消息结束
		}, 1000);
		return;
	} else if (req.url === "/index.html") {
		res.setHeader("content-type", "text/html");
		const data = fs.readFileSync(path.join(__dirname, "./index.html"));
		res.end(data);
		return;
	}

	res.end("true");
}).listen(5500);

Websocket

const WebSocket = require('ws');

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

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

  socket.on('message', (message) => {
    console.log(`Received message: ${message}`);

    // Echo the message back to the client
    socket.send(`Echo: ${message}`);
  });

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

const socket = new WebSocket('ws://localhost:3000');

socket.addEventListener('open', (event) => {
  console.log('Connected to server');
});

socket.addEventListener('message', (event) => {
  console.log(`Received message: ${event.data}`);
});

socket.addEventListener('close', (event) => {
  console.log('Disconnected from server');
});