Svelte и веб-сокет

WebSockets — это горячая тема, как и Svelte. Давайте посмотрим, как легко мы можем реализовать и то, и другое!

В этой статье я не буду вдаваться в подробности про Websockets или Svelte, так как на эту тему уже много написано. Поэтому я просто приведу короткий, но полезный пример того, как вы можете использовать WebSockets в своем проекте Svelte.

Svelte имеет некоторые отличия от Vue или React в том, что большая часть вычислений выполняется на этапе компиляции. Это делает его очень быстрым и, следовательно, очень интересным для создания приложений в реальном времени, что является отличным вариантом использования для реализации WebSockets.

Позвольте мне разбить различные части, которые нам нужны:

Сервер, готовый принять и ответить на соединение WebSocket

Во-первых, нам нужен сервер WebSocket. Вы можете прочитать, как легко настроить его с помощью Serverless framework здесь.

В противном случае вы можете использовать этот тестовый URL:
wss://hsvtfbxtsj.execute-api.eu-west-1.amazonaws.com/production

В настоящее время сервер размещен как бессерверный API на AWS, доступ к которому можно получить по указанному выше URL-адресу. Очевидно, вы можете просто заменить этот URL-адрес своей собственной службой.

Клиент Svelte для связи с сервером

Для взаимодействия с сервером WebSocket я создал файл store.js, содержащий весь код, который подключается, отправляет и получает сообщения с сервера и на него.

import { writable } from 'svelte/store';
const messageStore = writable({ data: 'Start', time: new Date() });

const serverUrl =
  process.env.NODE_ENV === 'production'
    ? 'YOUR_WEBSCOKET URL'
    : 'wss://hsvtfbxtsj.execute-api.eu-west-1.amazonaws.com/production';
const socket = new WebSocket(serverUrl);

const addToArray = (event) => {
  messageStore.update(() => {
    return event;
  });
};

const start = () => {
  socket.send('https://nytimes.com'); // On click we send a message to the server
};

socket.addEventListener('message', function (event) {
  addToArray({ time: new Date(), data: event.data }); // When the server respons with a message we save it in an array
});
export default {
  subscribe: messageStore.subscribe,
  start,
};

Магазин предоставляет две функции. Один для «подписки» на изменения в магазине. Это просто означает, что у нас всегда будет обновленное значение при подписке. Как его использовать можно увидеть через мгновение.
Кроме того, функция «старт» экспортируется. Это подключится к кнопке, так что мы сможем вручную запустить связь с сервером, и это здорово, верно?

UI-файл выглядит примерно так:

<script>
import store from './../store.js'
import { onMount } from 'svelte';

let eventsFromServer = []

onMount(async () => {
    // Here we recieve a callback whenever new data is pushed into the store
    store.subscribe(currentMessages => { 
      eventsFromServer = [...eventsFromServer, currentMessages]
    })
})


</script>
<div>
<button on:click="{store.start}"> // This will send a message to the server
    Click me
  </button>
 {#each eventsFromServer as event}
 <div
    id="slider"
    class="slide-in orange"
    v-for="event in eventsFromServer"
    :key="event.time"
  >
    <ul>
      <p>
        { new Date(event.time).toISOString() }
      </p>
      <li>
        { event.data }
      </li>
    </ul>
  </div>
   {/each}
</div>

Эти два компонента дадут результат ниже.

Результат

Исходный код

Вы можете посмотреть исходный код клиента svelte здесь.

Оставайтесь солеными!

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .