#node.js #reactjs #sockets #heroku #socket.io
#node.js #reactjs #сокеты #heroku #socket.io
Вопрос:
Я пытаюсь настроить простой сокет.сервер ввода-вывода 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 };
};
Комментарии:
1. Любопытно, действительно ли он подключается к heroku, то есть вы видите соединение сокета на heroku? Вы пытались изменить URL на http вместо wss? Сокет. io определит это для вас, поэтому он должен быть просто http или https
2. @proxim0 Я вижу подключение к сокетам на вкладке Chrome «Сеть», и при загрузке страницы он получает 5 сообщений с типами «уровень журнала», «горячий», «Загрузка», «хэш» и «ок». Я предполагаю, что это стандартные сообщения об установлении соединения. Другие не отображаются, когда я нажимаю
<span>
на эмиссию. Я сначала попробовал http / https, прежде чем попробовать wss, и не продвинулся дальше с ними.