如何用JavaScript实现Telnet连接以在网页展示服务器数据流？

核心思路是引入一个中间代理服务，由它维护唯一的Telnet连接获取数据流，再通过WebSocket/Server-Sent Events（SSE）将数据推送给所有网页客户端，避免每个客户端单独建立Telnet连接。以下是具体实现方案：

方案1：WebSocket代理服务（双向/高灵活性） #

用Node.js/Python等语言编写轻量代理，同时处理Telnet连接和WebSocket客户端广播：

示例：Node.js代理服务 #

const net = require('net');
const WebSocket = require('ws');

// 配置Telnet服务器信息
const TELNET_HOST = '你的Telnet服务器IP';
const TELNET_PORT = 23;
// 配置WebSocket服务端口
const WS_PORT = 8080;

// 建立与Telnet服务器的持久连接
const telnetConn = net.createConnection({ host: TELNET_HOST, port: TELNET_PORT }, () => {
  console.log('已连接到Telnet服务器');
});

// 启动WebSocket服务
const wss = new WebSocket.Server({ port: WS_PORT });
let dataCache = '';

// 接收Telnet数据并广播给所有WebSocket客户端
telnetConn.on('data', (rawData) => {
  // 处理Telnet控制字符（按需调整，比如过滤退格、清屏指令）
  const cleanData = rawData.toString().replace(/\x08|\x1B\[[0-9;]*[a-zA-Z]/g, '');
  dataCache += cleanData;
  
  // 广播给所有在线客户端
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(dataCache);
    }
  });
  dataCache = '';
});

// 处理新WebSocket客户端连接
wss.on('connection', (ws) => {
  console.log('新网页客户端连接');
  // 给新连接的客户端发送最新缓存数据
  if (dataCache) ws.send(dataCache);
  
  // 处理客户端断开
  ws.on('close', () => console.log('客户端断开连接'));
});

// 处理Telnet连接断开后的重连
telnetConn.on('close', () => {
  console.log('Telnet连接断开，尝试重连...');
  setTimeout(() => telnetConn.connect({ host: TELNET_HOST, port: TELNET_PORT }), 3000);
});

网页端代码 #

<div id="telnet-display" style="height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; font-family: monospace;"></div>

<script>
const ws = new WebSocket('ws://你的代理服务器IP:8080');
const displayArea = document.getElementById('telnet-display');

ws.onmessage = (event) => {
  displayArea.textContent += event.data;
  // 自动滚动到最新内容
  displayArea.scrollTop = displayArea.scrollHeight;
};

ws.onclose = () => {
  console.log('WebSocket连接断开，尝试重连...');
  setTimeout(() => window.location.reload(), 3000);
};
</script>

方案2：Server-Sent Events（SSE）代理服务（单向/轻量） #

如果只需要从服务器推送数据到网页（无需网页向Telnet发指令），SSE比WebSocket更简单，无需维护双向连接：

示例：Python Flask代理服务 #

from flask import Flask, Response
import telnetlib
import time

app = Flask(__name__)
TELNET_HOST = '你的Telnet服务器IP'
TELNET_PORT = 23

def get_telnet_stream():
    while True:
        try:
            # 建立Telnet连接
            tn = telnetlib.Telnet(TELNET_HOST, TELNET_PORT)
            while True:
                # 读取Telnet数据
                data = tn.read_some().decode('utf-8', errors='ignore')
                if data:
                    # 过滤控制字符
                    clean_data = data.replace('\x08', '').replace('\x1B', '')
                    yield f'data: {clean_data}\n\n'
                time.sleep(0.1)
        except Exception as e:
            print(f'Telnet连接异常: {e}，5秒后重连')
            time.sleep(5)

@app.route('/telnet-stream')
def stream():
    return Response(get_telnet_stream(), mimetype='text/event-stream')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, threaded=True)

网页端代码 #

<div id="telnet-display" style="height: 400px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; font-family: monospace;"></div>

<script>
const displayArea = document.getElementById('telnet-display');
const eventSource = new EventSource('http://你的代理服务器IP:5000/telnet-stream');

eventSource.onmessage = (event) => {
  displayArea.textContent += event.data;
  displayArea.scrollTop = displayArea.scrollHeight;
};

eventSource.onerror = () => {
  console.log('SSE连接断开，尝试重连...');
  eventSource.close();
  setTimeout(() => new EventSource('http://你的代理服务器IP:5000/telnet-stream'), 3000);
};
</script>

关键注意事项 #

• Telnet控制字符处理：Telnet数据流可能包含退格、清屏等控制指令，需要在代理或网页端过滤，避免展示乱码。
• 重连机制：代理服务需处理Telnet连接断开后的自动重连，网页端也要处理WebSocket/SSE的断开重连。
• 跨域配置：如果网页与代理服务不在同一域名，需在代理服务中配置CORS（比如Node.js用cors库，Flask用flask-cors扩展）。
• 高并发扩展：如果客户端数量极大，可引入Redis Pub/Sub等消息队列，让多个代理实例共享Telnet数据流，避免单节点压力。

内容的提问来源于stack exchange，提问作者bkeahl