Hallo, ich habe ein kleines Problem mit Socket.io!
Ich versuche mit Socket.io eine Nachricht in einen raum zu senden aber sie kommt einfach nie an, sie wird nicht mal vom Client Empfangen.
Hier mal mein Code vom Server:
const express = require('express');
const app = express();
const cors = require('cors')
const socket = require("socket.io")
const PORT = 8080;
// Verwenden von Cors für die Server-Client Kommunikation
app.use(cors())
// Get Abfrage an /api/home
app.get("/api/home", (req, res) => {
res.json({ message: "Hello World" });
})
app.get("/messages")
// Server Run
const server = app.listen(PORT, () => {
console.log(`Server started on port ${PORT}`);
})
// Festlegen der Cors
// Server Festlegen für den WebSocket
const io = socket(server, {
cors: {
origin: "http://localhost:3000", // Die erlaubte Herkunft
methods: ["GET", "POST"]
}
})
// Socket Connection zum client
io.on('connection', ( socket ) => {
socket.on('JoinRoom', room => {
console.log('joined channel ' + room)
socket.join(room)
socket.room = room
})
socket.on("message", data => {
console.log(data)
io.to(socket.room).emit("message", { message: data.message, channel: socket.room}) // Funktioniert nicht
io.emit('message', { message: data.message, channel: socket.room}) // Funktioniert
})
})
und Vom Client:
import { useRouter, Router } from 'next/router'
import React, { useState, useEffect } from 'react';
import { Socket, io } from 'socket.io-client'
interface ListItemProps {
text: string;
}
const ListItem: React.FC<ListItemProps> = ({ text }) => {
return <li>{text}</li>;
};
export default function MessageComponent() {
const router = useRouter() as Router
// Get/Set
const [items, setItems] = useState<string[]>([]);
const [newItem, setNewItem] = useState<string>('');
// Verbindung zum WebSocket-Server herstellen
const socket = io("http://localhost:8080") as Socket
// Hinzufügen der Nachricht
const addItem = () => {
socket.emit('message', { message: newItem })
};
useEffect(() => {
// Event-Handler für das 'message'-Event
socket.on('message', (data) => {
console.log(true)
// Hier können Sie die empfangene Nachricht verarbeiten
setItems((prevItems) => [...prevItems, data.message]);
setNewItem('');
});
// Aufräumen des Event-Handlers, wenn die Komponente unmontiert wird
return () => {
socket.off('message');
};
}, []);
return (
<div>
<ul>
{items.map((item, index) => (
<ListItem key={index} text={item} />
))}
</ul>
<input
type="text"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
placeholder="Neues Element hinzufügen"
/>
<button onClick={addItem}>Send</button>
</div>
);
}
