Сотрудничество в реальном времени на вашем сайте с TogetherJS

Нельзя отрицать, что сотрудничество в режиме реального времени стало важной частью современной сети. Google Диск является отличным примером того, как совместная работа в режиме реального времени является важным способом работы в Интернете в наши дни. Применяя ту же концепцию, Mozilla Labs представили свой собственный инструмент TogetherJS, библиотеку JavaScript на основе HTML5, которая легко обеспечивает взаимодействие между пользователями в режиме реального времени.

TogetherJS позволяет всем вовлеченным пользователям видеть позицию мыши / курсора, позицию прокрутки и щелчки друг друга. Синхронизация доступна для редактирования форм и воспроизведения / приостановки видео. В целях общения пользователи также могут общаться в чате, используя текст и аудио.

Рекомендуемое чтение: руководство по онлайн-сотрудничеству: полезные советы, инструменты и приложения

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Позади вместе

Первоначально TogetherJS был запущен как сервис для совместной работы пользователей в режиме реального времени. Эвакуатор, Он был выпущен Mozilla Labs в апреле 2013 года. Но поскольку продукт вышел за рамки своей первоначальной концепции, они решили изменить имя,

Вместе JS зависит от WebSockets технология для его интерактивного общения между различными браузерами пользователей. Для его базовой реализации существует хаб-сервер, который будет передавать полученные сообщения всем участникам. Здесь пользователи могут видеть курсоры других пользователей, положения прокрутки и щелчки. Хаб-сервер по умолчанию размещается на Mozilla, но при желании вы также можете разместить свой собственный,

Для функций аудио-чата, WebRTC это то, что помогает. Если вы хотите узнать больше о технологиях, стоящих за ним, перейдите на обзор технологий стр.

Применение

Чтобы показать вам, как использовать TogetherJS, я буду использовать его примеры приложений, И чтобы показать это для разных пользователей, я продемонстрирую это на двух разных браузерах (Chrome и Firefox) одновременно. Давайте начнем!

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

В мастере руководства укажите свое имя, загрузите аватар и измените цвет своего профиля. Это необязательно, так как вы можете сделать это позже на панели TogetherJS.

На правой стороне вы должны увидеть панель TogetherJS. На этой панели вы можете обновить свой профиль, получить ссылку для совместной работы и пообщаться в чате с текстом или аудио. Чтобы пригласить друга, просто нажмите в меню «Добавить друга» (как показано ниже), скопируйте ссылку и отправьте ее своему другу.

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

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

Когда ваши друзья прокручивают свою собственную страницу, их курсор будет направлен вниз, как на следующем снимке экрана (только на Chrome).

Чтобы общаться с вашим другом, вы можете использовать функции чата: текстовый или аудио-чат. Но учтите, что функция аудио чата все еще в экспериментальная фаза,

Установка
Чтобы установить TogetherJS, вам просто нужно добавить пару строк кода в ваш HTML. Сначала добавьте следующий фрагмент перед закрывающим тегом вашего тела:

Вы также можете скачать источник и разместить его на своем сервере, если хотите.

Это оно! Теперь у вас есть TogetherJS на вашем сайте, и он будет активен после того, как браузер завершит перезагрузку страницы. В любом случае, это работает только после того, как пользователи нажмут на кнопку. Просто добавьте код ниже, где вы хотите:

Для более подробной настройки и других настроек, пожалуйста, посетите страница документации,

Вывод

TogetherJS полезен для тех, кому нужны возможности совместной работы для их веб-страницы или веб-проекта, чтобы держать своих онлайн-соавторов на одной странице. Тот факт, что TogetherJS позволяет использовать эту функцию на любом сайте и в нескольких браузерах, является мощной возможностью, которой мы можем воспользоваться. Есть хорошие примеры его реализации на JSFiddle а также Pixelreka что вы можете проверить, чтобы увидеть его потенциал.