Integrating with Frontend Frameworks

React Example:

1. Install Dependencies:

npm install socket.io-client

1. Create a React Component (Chat.tsx):

import React, { useState, useEffect } from 'react'; import io from 'socket.io-client'; const socket = io(); const Chat: React.FC = () => { const [message, setMessage] = useState(''); const [messages, setMessages] = useState<string[]>([]); useEffect(() => { socket.on('chat message', (msg: string) => { setMessages((prevMessages) => [...prevMessages, msg]); }); return () => { socket.off('chat message'); }; }, []); const sendMessage = (e: React.FormEvent) => { e.preventDefault(); socket.emit('chat message', message); setMessage(''); }; return ( <div> <ul> {messages.map((msg, index) => ( <li key={index}>{msg}</li> ))} </ul> <form onSubmit={sendMessage}> <input value={message} onChange={(e) => setMessage(e.target.value)} /> <button type="submit">Send</button> </form> </div> ); }; export default Chat;

Vue Example:

1. Install Dependencies:

npm install socket.io-client

1. Create a Vue Component (Chat.vue):

<template> <div> <ul> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> <form @submit.prevent="sendMessage"> <input v-model="message" /> <button type="submit">Send</button> </form> </div> </template> <script> import io from 'socket.io-client'; export default { data() { return { message: '', messages: [] }; }, created() { const socket = io(); socket.on('chat message', (msg) => { this.messages.push(msg); }); }, methods: { sendMessage() { const socket = io(); socket.emit('chat message', this.message); this.message = ''; } } }; </script>