如何让Netlify部署的Socket.io+Node.js聊天应用支持多设备访问？

我用Socket.io与Node.js开发了一款聊天应用，部署到Netlify平台后，仅能在我的设备上正常运行，其他设备无法使用。注：未集成数据库。

代码文件 #

1. HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iChat App</title>
    <script defer src="http://localhost:8000/socket.io/socket.io.js"></script>
    <script defer src="js/client.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <section class="msger">
        <header class="msger-header">
            <div class="msger-header-title">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor"
                    class="bi bi-chat-heart" viewBox="0 0 16 16">
                    <path fill-rule="evenodd"
                        d="M2.965 12.695a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2Zm-.8 3.108.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125ZM8 5.993c1.664-1.711 5.825 1.283 0 5.132-5.825-3.85-1.664-6.843 0-5.132Z" />
                </svg>
                iChat App
            </div>
            <div class="msger-header-options">
                <span><i class="fas fa-cog"></i></span>
            </div>
        </header>

        <main class="msger-chat">
            <div class="msg left-msg">
            </div>
            </div>

            <div class="msg center-msg">
            </div>

            <div class="msg right-msg">
            </div>
        </main>

        <form class="msger-inputarea" id="send-container" onsubmit="return false">
            <input type="text" class="msger-input" placeholder="Enter your message..." id="messageInp">
            <button type="submit" class="msger-send-btn">Send</button>
        </form>

        <!-- <form action="#" id="send-container">
            <input type="text" name="messageInp" id="messageInp">
            <button class="btn" type="submit">Send</button>
        </form> -->
    </section>
</body>

</html>

2. index.js（服务器端） #

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

const server = app.listen(8000);
const io = new Server(server, { cors: { origin: '*' } });
const users = {};

io.on('connection', socket => {
    //  If any new user joins, let other users connected to the server know!
    socket.on('new-user-joined', name => {
        users[socket.id] = name;
        socket.broadcast.emit('user-joined', name);
    });

    // If someone sends a message, broadcast it to other people!
    socket.on('send', message => {
        socket.broadcast.emit('receive', { message: message, name: users[socket.id]});
    });

    // If someone sends a message, let others know!
    socket.on('disconnect', message => {
        socket.broadcast.emit('left', users[socket.id]);
        delete users[socket.id];
    });
});

module.exports.handler = serverless(app);

3. client.js（客户端） #

const socket = io('http://localhost:8000');

// Get DOM elements to respective JS variables.
const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp');
const messageContainer = document.querySelector('.msger-chat');

// Audio that will play on receving message.
var audio = new Audio('ting.mp3');

//Function which will append event info to the container. 
const append = (message, position) => {
    const messageElement = document.createElement('div');
    // messageElement.innerText = message;
    messageElement.classList.add('msg');
    messageElement.classList.add(position);

    const msgBubble = document.createElement('div');
    messageElement.appendChild(msgBubble);
    msgBubble.classList.add('msg-bubble');

    // const msgImg = document.createElement('div');
    // messageElement.appendChild(msgImg);
    // msgImg.classList.add('msg-img');

    const msgInfo = document.createElement('div');
    messageElement.appendChild(msgInfo);
    msgInfo.classList.add('msg-info');

    const msgInfoName = document.createElement('div');
    messageElement.appendChild(msgInfoName);
    msgInfoName.classList.add('msg-info-name');

    const msgInfoTime = document.createElement('div');
    messageElement.appendChild(msgInfoTime);
    msgInfoTime.classList.add('msg-info-time');

    const msgText = document.createElement('div');
    msgBubble.appendChild(msgText);
    msgBubble.innerText = message;
    msgText.classList.add('msg-text');

    messageContainer.append(messageElement);
    if(position == 'msg-text'){
        audio.play();
    }
}

// Ask new user for his/her name and let the server know.
const name = prompt('Enter your name to join');
socket.emit('new-user-joined', name);

// If new user joins, recieve his/her name from the server know.
socket.on('user-joined', name => {
    append(`${name} joined the chat`, 'center-msg')
});

// If server sends a message, receive it.
socket.on('receive', data => {
    append(`${data.name}: ${data.message}`, 'msg-text')
});

// If a user leaves the chat, append the info to the container.
socket.on('left', name => {
    append(`${name} left the chat!`, 'center-msg')
});

// If the form gets submitted, send server the message.
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const message = messageInput.value;
    append(`You: ${message}`, 'right-msg');
    socket.emit('send', message);
    messageInput.value = '';
});

问题原因及解决方法 #

核心问题 #

1. 客户端硬编码本地地址：HTML和client.js中均使用http://localhost:8000，其他设备无法访问你的本地端口，必须替换为服务器公网地址。
2. Netlify不支持WebSocket长连接：Netlify Functions是短生命周期的无状态函数，Socket.io依赖的WebSocket长连接无法在此平台正常运行，Netlify特性不适合部署实时聊天服务器。

解决步骤 #

1. 更换服务器部署平台

选择支持Node.js长连接的平台，比如Render、Fly.io，这类平台可持续运行Node.js服务器，支持WebSocket连接。

2. 修改服务器端代码

• 移除硬编码端口，改用环境变量适配部署平台：

const PORT = process.env.PORT || 8000;
const server = app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• 放弃serverless-http，直接部署完整Node.js服务器（Serverless架构不适合实时应用场景）。

3. 修改客户端代码

• 更新HTML中Socket.io脚本地址为服务器公网域名：

<script defer src="https://你的服务器域名/socket.io/socket.io.js"></script>

• 更新client.js中的连接地址：

const socket = io('https://你的服务器域名');

4. 重新部署

• 将前端静态文件（HTML、CSS、client.js）部署到Netlify或与服务器同平台。
• 确保服务器CORS配置允许前端域名访问（前后端分离部署时）。

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