useSocket()
useSocket function is like a walkie-talkie for websites, letting servers and clients chat back and forth in real-time.
Within the useSocket()
function, two functions are encapsulated.
joinRoom()
subscribe()
With joinRoom()
we can create a room for chats, games etc.
The
subscribe()
function acts as an event listener, fetching backend events upon occurrence. This enables the frontend to seamlessly display updates, eliminating the need for a page refresh—a functionality commonly exemplified in real-time messaging scenarios.
Frontend
import { useSocket } from '@magicjs.dev/frontend';
const { subscribe, joinRoom } = useSocket();
React.useEffect(() => {
const leave = joinRoom(`public/room`);
return leave;
}, []);
React.useEffect(() => {
const unsubscribe = subscribe(`refresh`, () => {
// Function you want to call after emitting
handleFetchLatestMessage();
});
return unsubscribe;
}, []);
This code establishes a WebSocket connection to the designated room (public/room)
and subscribes to a specific event (refresh)
. Upon the occurrence of this event, the handleFetchLatestMessage
function is invoked. To ensure proper cleanup, the component gracefully exits the room and unsubscribes from the event upon unmounting.
Backend
import { createBackendFunction, data, io, useFunctionContext } from "@magicjs.dev/backend";
export default createBackendFunction(async function (message) {
try {
const messageCollection = data("messages"); // Fetching db
const context = useFunctionContext(this);
const userId = context.currentUser._id;
const userName = context.currentUser.name;
const messageItem = await messageCollection.insertOne({
senderId: userId,
senderName: userName,
message
});
io().to(`public/room`).emit(`refresh`);
return messageItem;
}
}});
Last updated