mirror of
https://github.com/bigskysoftware/htmx.git
synced 2026-01-21 16:16:05 +00:00
546e346e98
absolute 👑
* Restore WS and SSE code
First pass at restoring removed ws and sse code. More to come.
* More progress on WS and SSE restore
* Update htmx.js
crucial whitespace
* Update documentation
* Combine SSE and WS servers into single "realtime" demo
* Realtime Test Server Updates
- separated tests for old- and new- style calling
- updated intro content and stylesheet
- removed extensions from manual test suite
* Remove SSE/WS from manual tests
35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
<h1>WebSockets</h1>
|
|
|
|
<p>WebSockets create a fast, bi-directional connection between your server and a client's web browser.</p>
|
|
<p>As of version 1.7, WebSocket support has been moved into a new extension, and the existing <b>hx-ws</b> tag has been deprecated. All future development will occur in the extension code, and the deprecated tag will be removed in htmx version 2.0</p>
|
|
|
|
<h3>Required Attributes</h3>
|
|
<table>
|
|
<tr>
|
|
<td class="bold nowrap">hx-ext</td>
|
|
<td>Make sure the WS extension is initialized on every page or page fragment where you use WebSockets.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="bold nowrap">ws-connect</td>
|
|
<td>Connects to a WebSocket. All received messages parsed as OOB Swaps.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="bold nowrap">ws-send</td>
|
|
<td>Marks a form that, when submitted, will have its contents serialized and sent to the connected WebSocket server</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h3>Example Code</h3>
|
|
|
|
<pre class="code">
|
|
<body>
|
|
<div hx-ext="ws" ws-connect="https://my.websocket.server.com"></div>
|
|
</body>
|
|
</pre>
|
|
<h3>WebSocket Resources</h3>
|
|
<ul>
|
|
<li><a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank">Wikipedia</a></li>
|
|
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebSocket" target="_blank">MDN Web Docs</a></li>
|
|
<li><a href="https://caniuse.com/websocket" target="_blank">Can I Use?</a></li>
|
|
</ul>
|