Turbo은 JavaScript 없이 HTML 마크업으로 완전히 구동되는 훌륭한 웹 프런트엔드를 구축하는 새로운 방법입니다. 그Turbo는 새로운 메일 서비스Basecamps의 동력HeyHey입니다.

Turbo의 중심에는 HTTP 또는 WebSocket을 통해 실시간 업데이트를 제공하는 Streams이 있습니다.

Turbo Streams를 사용하면 전선을 통해 일반 html로 dom 업데이트를 보냈습니다. 이렇게:

<turbo-stream action="append" target="dom_id">
  <template>
    Content to append to container designated with the dom_id.
  </template>
</turbo-stream>

그런 다음 template 요소에서 전송된 html은 id가 dom_id인 dom 요소에 추가됩니다. 너무 간단합니다. 물론 repace 및 remove 작업을 사용하여 동일한 방식으로 dom에서 html을 교체하거나 제거할 수도 있습니다.

그것을 사용하기를 열망하는 모든 Gophers를 위해 내가 당신을 덮었습니다! 다음은 Go에서 Turbos Streams를 사용하는 간단한 예입니다.
Gorilla WebSocket 툴킷을 사용합니다.

리마스트 / go_websocket_turbo

Gorilla WebSocket 툴킷과 함께 Go에서 Turbos Streams를 사용하는 간단한 예입니다.

WebSockets를 통한 TurboStreams의 Go 예제

Turbo 툴킷과 함께 Go에서 Stream s Gorilla WebSocket s를 사용하는 간단한 예입니다.
다음 명령어를 사용하여 샘플을 실행합니다.

$ go run *.go

채팅 예를 사용하려면 브라우저에서 http://localhost:8080/을 엽니다.

프런트엔드

프런트엔드는 다음과 같은 일반 JavaScript를 사용하여 Turbo Stream에 연결합니다.

<script src="https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/dist/turbo.es2017-umd.min.js" ></script>
<script>
Turbo.connectStreamSource(new WebSocket("ws://" + document.location.host + "/ws"));
</script>

그 후 프런트엔드는 Turbo Stream에 연결되고 모든 메시지를 받습니다. 모든 채팅 메시지는 id가 board 인 dom 요소에 추가됩니다.
이것은 html 마크업에서도 작동해야 하지만 아직 작동하지 않았습니다.

섬기는 사람

서버는 웹 소켓을 통해 새 채팅 메시지를 받습니다. 그런 다음 메시지를 Turbo Stream으로 래핑합니다…

View on GitHub