寻求协助：用Socket.IO实现Java客户端与HTML/JS服务端连接

步骤1：准备环境 #

确保已安装Node.js和npm（Node.js自带npm），可通过终端执行以下命令验证：

node -v
npm -v

步骤2：初始化项目 #

1. 创建新文件夹（如socketio-server）并进入：

mkdir socketio-server && cd socketio-server

2. 初始化npm项目（加-y可跳过信息填写）：

npm init -y

步骤3：安装依赖 #

安装Socket.IO服务端和Express（用于搭建静态web服务器）：

npm install socket.io express

步骤4：编写服务端代码 #

在项目根目录创建server.js文件，内容如下：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
// 配置Socket.IO，允许跨域适配Java客户端连接
const io = new Server(server, {
  cors: {
    origin: "*", // 生产环境建议限制具体域名，测试阶段可放开
    methods: ["GET", "POST"]
  }
});

// 提供静态文件服务，前端页面放在public文件夹
app.use(express.static('public'));

// 监听客户端连接
io.on('connection', (socket) => {
  console.log('Java客户端已连接');

  // 监听Java端发送的消息事件（需和Java代码中的事件名保持一致）
  socket.on('send-message', (message) => {
    console.log('收到Java端消息:', message);
    // 将消息广播给所有连接的前端页面
    io.emit('receive-message', message);
  });

  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log('客户端已断开连接');
  });
});

// 启动服务，监听3000端口
server.listen(3000, () => {
  console.log('服务运行在http://localhost:3000');
});

步骤5：编写前端展示页面 #

1. 在项目根目录创建public文件夹：

mkdir public

2. 在public文件夹下创建index.html文件，内容如下：

<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO消息展示</title>
  <style>
    #message-container {
      width: 80%;
      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      min-height: 300px;
    }
    .message {
      margin: 10px 0;
      padding: 8px;
      background-color: #f5f5f5;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div id="message-container">
    <h3>来自Java端的消息：</h3>
    <div id="messages"></div>
  </div>

  <!-- 引入Socket.IO客户端库 -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 连接到本地Socket.IO服务
    const socket = io('http://localhost:3000');

    // 监听服务端转发的消息并展示
    socket.on('receive-message', (message) => {
      const messagesDiv = document.getElementById('messages');
      const messageElement = document.createElement('div');
      messageElement.className = 'message';
      messageElement.textContent = message;
      messagesDiv.appendChild(messageElement);
    });
  </script>
</body>
</html>

步骤6：启动服务并测试 #

1. 在终端执行以下命令启动服务：

node server.js

2. 打开浏览器访问http://localhost:3000，页面会显示消息容器。
3. 运行你的Java客户端发送消息，网页将实时展示收到的内容。

注意事项 #

• Java端发送消息的事件名（如示例中的send-message）必须与服务端监听的事件名完全一致。
• 生产环境中，建议将cors.origin设置为具体域名，而非*，提升安全性。

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