PresenceJS: самый простой способ улучшить работу в реальном времени в моих приложениях для совместной работы

Как внешний разработчик, я работал над созданием приложений для совместной работы, в которых особенно важна производительность многопользовательских функций в реальном времени. Он должен синхронизировать состояние пользователей менее чем за 100 мс между двумя пользователями.

В этой статье я хотел бы продемонстрировать, как «presencejs» помог мне реализовать эти многопользовательские функции за 2 часа. Кроме того, компонент присутствия является полностью открытым исходным кодом, а также хорошо справляется с безопасностью, малой задержкой и геораспределенным развертыванием. На протяжении всего моего опыта использования этой библиотеки я был впечатлен ее мощью и возможностями.

Поэтому я решил написать этот блог, чтобы представить вам эту превосходную перспективную библиотеку JavaScript. Presencejs – это библиотека JavaScript, которая позволяет создавать многопользовательские/совместные веб-приложения в реальном времени, поддерживающие WebTransport.

Он предоставляет множество готовых компонентов, таких как Cursor-Chat, Live-Cursor, Grouphug и т. д. Конечно, мы можем создавать более функциональные пользовательские компоненты, используя базовые функции и API присутствия. С помощью готовых компонентов я за считанные минуты создал демо-версию веб-приложения nextjs в реальном времени.

* Presencejs: https://github.com/yomorun/presencejs * Демонстрация: https://cursorchat-grouphug-demo.vercel.app/

Как я создал эту демонстрацию?

В этой демонстрации я использовал библиотеку Presencejs для создания многопользовательского веб-приложения для совместной работы в режиме реального времени. Для демонстрации я выбрал простой, но эффективный дизайн. Я выбрал чистый и современный вид с тонкой цветовой гаммой, которая не будет отвлекать от контента. Presencejs предоставляет несколько готовых компонентов, таких как Cursor Chat, Realtime Cursor и Grouphug. Я использовал эти компоненты вместе с некоторыми пользовательскими функциями для создания этой демонстрации. Вот краткий обзор того, как я его создал:

* Сначала я установил и импортировал в свой код библиотеку Presencejs.

npm install @yomo/cursor-chat-react
npm install @yomo/group-hug-react

импортировать CursorChat из '@yomo/cursor-chat-react'; импортировать GroupHug из '@yomo/group-hug-react';

* Затем я использовал компоненты, предоставленные Presencejs, для создания своего приложения. В этой демонстрации я использовал компоненты Cursor-Chat и Grouphug.

// other code

import CursorChat from '@yomo/cursor-chat-react';
import GroupHug from '@yomo/group-hug-react';


export default function Home(){
// other code

return(

// other code

<CursorChat />
<Grouphug />

// other code

)
}

* Затем я добавил некоторые пользовательские функции. Я получил public_key от AllegroCloud.io и создал файл .env по основному пути. Я ввел код ниже:

PUBLIC_KEY=****

И я сохранил этот файл, а затем запустил демо локально. Наконец, я развернул свое приложение онлайн с помощью Next.js, чтобы другие могли получить к нему доступ.

В целом, создать веб-приложение в реальном времени с помощью Presencejs несложно. Presencejs предоставляет множество готовых компонентов, которые позволяют разработчикам быстро создавать свои собственные приложения.

Кроме того, Presencejs поддерживает индивидуальную разработку, что позволяет продвинутым разработчикам создавать более сложные функции. Я надеюсь, что эта демонстрация вдохновит больше разработчиков попробовать использовать Presencejs для создания собственных веб-приложений в реальном времени.

Особые преимущества присутствия

Судя по моему опыту работы с этим, Presencejs оказался особенно полезным для меня в следующих отношениях:

• Благодаря поддержке WebTransport файлы присутствия демонстрируют более высокую производительность, чем другие библиотеки js для совместной работы.
• Совместимость с веб-сокетом
• Готовые компоненты и индивидуальная разработка.
• Географически распределенная архитектура позволяет мне создавать потрясающие веб-приложения с быстрым откликом.
• Как без сервера, так и на собственном хостинге.

Подробнее о преимуществах:

• Поддержка веб-транспорта: Presencejs поддерживает WebTransport, новый протокол приложений реального времени, основанный на протоколе QUIC. Он устанавливает надежные, безопасные соединения с малой задержкой, не требуя рукопожатий и согласований, таких как веб-сокет. Он также поддерживает расширенные функции, такие как мультиплексирование и миграция соединений. Это обеспечивает более высокую скорость установления соединения, скорость передачи данных и минимальную задержку.
• Совместимость с веб-сокетом: Presencejs также поддерживает веб-сокет. Если браузер пользователя не поддерживает WebTransport, Presencejs заменит протокол связи на веб-сокет.
• Готовые компоненты и индивидуальные разработки: Presencejs предоставляет готовые компоненты, такие как grouphug, livecursor и cursorchat, которые позволяют работать с веб-приложениями в реальном времени. Опытные разработчики могут использовать полный набор инструментов для создания пользовательских компонентов.
• Географически распределенная архитектура: Presencejs — это фреймворк безсерверной архитектуры, использующий фреймворк YoMo для обработки данных в реальном времени. Это обеспечивает более высокую скорость отклика, стабильную работу и безопасный сервис.
• Как бессерверные, так и самостоятельные: Presencejs поддерживает самостоятельный хостинг, что обеспечивает больший контроль над данными и приложениями.

Заключительные заметки и мысли

Подводя итог, Presencejs предлагает ряд преимуществ, которые делают его отличным выбором для разработчиков, стремящихся создавать веб-приложения в реальном времени. Его поддержка протоколов WebTransport и веб-сокетов, готовые компоненты, настраиваемая разработка, геораспределенная архитектура, а также варианты бессерверного или самостоятельного хостинга предоставляют разработчикам универсальный набор инструментов для создания потрясающих приложений.

Внедряя присутствия, разработчики могут обеспечить более быстрое время отклика своих приложений, большую стабильность и повышенную безопасность. Кроме того, как продукт с открытым исходным кодом, в ближайшие годы Presencejs будет продолжать совершенствоваться и развиваться. В целом, Presencejs — это перспективный продукт, способный удовлетворить потребности Интернета в режиме реального времени сегодня и в будущем.

Как опытный разработчик AllegroCloud и разработчик внешнего интерфейса, я полностью осознаю недостатки Presence. Однако, будучи продуктом с открытым исходным кодом, Presence обладает более надежной жизнеспособностью и более прозрачным технологическим заделом. В ближайшие годы Presence будет обновляться и улучшаться, предоставляя услуги еще более высокого качества.