https://github.com/remast/spring-websocket-turbo
Simple example for using Turbos Streams in Spring Boot.
https://github.com/remast/spring-websocket-turbo
Last synced: 8 months ago
JSON representation
Simple example for using Turbos Streams in Spring Boot.
- Host: GitHub
- URL: https://github.com/remast/spring-websocket-turbo
- Owner: remast
- Created: 2021-01-01T10:19:00.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-11-07T15:12:42.000Z (over 1 year ago)
- Last Synced: 2024-11-07T16:24:41.402Z (over 1 year ago)
- Language: Java
- Homepage:
- Size: 89.8 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Spring Boot Example for TurboStreams over WebSockets
Simple example for using [Turbo](https://turbo.hotwire.dev/)s [Stream](https://turbo.hotwire.dev/reference/streams)s in Go with the [Gorilla WebSocket](https://github.com/gorilla/websocket) toolkit.
Run the sample using the following command:
$ ./mvnw spring-boot:run
To use the chat example, open http://localhost:8080/ in your browser.
## Frontend
The frontend connects to the Turbo Stream using plain JavaScript like:
```html
Turbo.connectStreamSource(new WebSocket("ws://" + document.location.host + "/chat"));
```
After that the frontend is connected to the Turbo Stream and get's all messages. Every chat message is appended to the dom element with id `board`.
This _should_ work with html markup too but I have not gotten it working yet.
## Server
The server receives the new chat message via plain web socket. Then it wraps the message as Turbo Stream action with action `append` and broadcasts it to all subscribers. That way all subscribed users see the new message on the board.
The [SocketHandler](src/main/java/remast/websocket/turbo/SocketHandler.java) takes the incoming chat message, wraps it in a Turbo Stream Action
and broadcasts it to all connected clients:
```java
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
// 1. Create identifier
var identifierJson = objectMapper.createObjectNode();
identifierJson.put("channel", "Turbo::StreamsChannel");
identifierJson.put("signed_stream_name", "**mysignature**");
// 2. Create Turbo Stream Action
var turboAction = "" +
"" +
"
$$MESSAGE$$
" +
"" +
"";
turboAction = turboAction.replace("$$MESSAGE$$", message.getPayload());
// 3. Create WebSocket Message as JSON
var turboMessageJson = objectMapper.createObjectNode();
turboMessageJson.put("identifier", objectMapper.writeValueAsString(identifierJson));
turboMessageJson.put("message", turboAction);
// 4. Broadcast WebSocket Message to all connected sessions
var turboStreamPayload = objectMapper.writerWithDefaultPrettyPrinter()
.writeValueAsString(turboMessageJson);
broadcast(new TextMessage(turboStreamPayload));
}
```
The raw text message sent over the web socket is:
```json
{
"identifier":
"{\"channel\":\"Turbo::StreamsChannel\", \"signed_stream_name\":\"**mysignature**\"}",
"message":
"
My new Message
"
}
```
Turbo Streams use raw JSON messages over WebSockets without STOMP.
## Credits
A lot of insights by https://github.com/mbucc/hotwire-demo-chat-in-springboot.