WebSockets Demo

Converted minimal Socket.io chat app to React with Socket.io React doc and styled with Tailwind

Install and run

1. Run npm install in both backend and frontend folders
2. Run npm run dev in both backend and frontend folders
3. Open http://localhost:5173 in two tabs, enter a name and message to send via WebSocket

websockets-demo.mp4

Structure

backend
└── server.js
frontend
└── src
    ├── components
    │   ├── ChatForm.tsx
    │   ├── ConnectionManager.tsx
    │   ├── ConnectionState.tsx
    │   └── Messages.tsx
    ├── App.tsx
    └── socket.ts