WebSocket talkie

This playground connects to a WebSocket endpoint and sends simple text messages. Open this page in another browser or device that reaches the same server to see how a shared channel can be used.

Sample: WebSocket talkie

Code

<serc-rod
	data='{"name":"", "text":""}'
	*websocket="'wss://ws.sercrod.com:8443/'"
	*into="ws_data"
>
	<h2>Sercrod WebSocket talkie</h2>

	<p *if="$ws_ready">WS: connected (same IP room)</p>
	<p *else>WS: not connected</p>

	<p>
		<label>
			Your name:
			<input type="text" *input="name" *lazy>
		</label>
	</p>

	<p>
		<label>
			Message:
			<input type="text" *input="text" *lazy>
		</label>
	</p>

	<p>
		<button
			*if="$ws_ready"
			*ws-send="(name || 'anonymous') + ': ' + text"
			@click="text = ''"
		>Send</button>
		<span *else>Waiting for connection...</span>
	</p>

	<h3>Last message from server</h3>
	<pre>%$ws_last%</pre>
</serc-rod>

Sample

%$ws_last%

Notes

• This sample assumes a WebSocket server at wss://ws.sercrod.com:8443/.
• Older examples may use wss://ws.sercrod.com:8443/ws.
• The minimal server example is available as websocket-talkie.js.txt.
• For public deployments, consider adding access logging, log rotation, and rate limiting on the server side.
• To protect this demo server, connections from the same IP address may be temporarily limited when access is repeated too frequently.
• *websocket manages the connection and exposes state such as $ws_ready and $ws_last.
• *ws-send sends the current message; the click handler clears the input.
• *lazy keeps text input updates local instead of refreshing the parent template on every change. In this sample, it helps the user type a message and then move focus or click Send naturally. See *lazy.