This page shows the WebSocket flow: the server upgrades the connection once, then both the browser and server can keep sending messages over that same socket.
This demo uses a small custom Next server because WebSockets need an HTTP upgrade, which is lower-level than an App Router route handler. Once the upgrade succeeds, the browser and server keep a shared socket open for two-way messaging.
In this example, the server sends a connected message once, a tick message every 2 seconds, and an echo message whenever you send text from the browser.
Direction: client and server both talk
WebSocket Client Demo
Watch server ticks arrive, then send your own message and see the same socket echo it back.
Status
idle
Tick Count
0
Latest Message
No messages yet
Connect to start the socket.
Latest Payload
{
"message": "Waiting for WebSocket data..."
}Recent Message Log