Блог

Я пытаюсь настроить простой сокет.сервер ввода-вывода echo на Heroku с использованием Express и React. Сервер возвращает сайт React из build папки, затем прослушивает входящие сообщения с помощью onAny() . Локально все работает нормально, но при развертывании в Heroku ни одно из сообщений, отправленных клиентом, не проходит после установления соединения.

Я использовал руководство Heroku, а также create-react-app и this Medium article в качестве отправных точек, и обязательно включил http-session-affinity, как указано в руководстве Heroku.

В настоящее время клиент React настроен на отправку фиксированного сообщения через onclick обработчик a <span> .

Вот содержимое server.js :

 'use strict';

const path = require('path');
const express = require('express');
const socketIO = require('socket.io');

const PORT = process.env.PORT || 3000;

const app = express()
    .use(express.static('build'))
    .listen(PORT, () => console.log(`Listening on ${PORT}`));

const io = socketIO(app);

io.on('connection', (socket) => {
    console.log('Client connected');
    socket.on('disconnect', () => console.log('Client disconnected'));
    socket.onAny((type, data) => {
        console.log('Received:');
        console.log(data);
        socket.emit('echo', data);
    });
});
 

И вот клиентский хук React, который устанавливает соединение и отправляет сообщения, где я заменяю [app-name] на имя приложения Heroku:

 import { useEffect, useRef, useState } from "react";
import socketIOClient from "socket.io-client";

const NEW_CHAT_MESSAGE_EVENT = "newChatMessage";
// const SOCKET_SERVER_URL = 'localhost:3000';
const SOCKET_SERVER_URL = 'wss://[app-name].herokuapp.com/sockjs-node';

const useChat = (roomId) => {
    const [messages, setMessages] = useState([]);
    const socketRef = useRef();

    useEffect(() => {
        socketRef.current = socketIOClient(SOCKET_SERVER_URL, {
            query: { roomId },
        });

        socketRef.current.on(NEW_CHAT_MESSAGE_EVENT, (message) => {
            console.log(message);
            const incomingMessage = {
                ...message,
                ownedByCurrentUser: message.senderId === socketRef.current.id,  
            };
            setMessages((messages) => [...messages, incomingMessage]);
        });

        return () => {
            socketRef.current.disconnect();
        };
    }, [roomId]);

    const sendMessage = (messageBody) => {
        console.log('sendMessage()');
        socketRef.current.emit(NEW_CHAT_MESSAGE_EVENT, {
            body: messageBody,
            senderId: socketRef.current.id,
        });
    };

    return { messages, sendMessage };
};