Как написать свой мессенджер delphi

Мессенджер

И так хочу сделать свой интернет мэссенджер, на подобие аськи, майлруагента, но только текстовый обмен(не спрашивайте для каких целей)
Основные требования: Сервер должен располагаться на хостинге(на которых обычно располагаются сайты(лучше бесплатный конечно))
Клиентская часть на Delphi.

Основная задача: Допустим в этой сети будет ну пользователей эдак 1000, и я должен всем им послать сообщение, а они уже его обработают(запланировано что-то типа кластера).

И так, подскажите, пожалуйста, что использовать, в какую сторону рыть, и может, если знаете, тыкните меня носом в готовое решение.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Корпоративный мессенджер
Всем привет. Заказали корпоративный мессенджер в структуре клиент1 — сервер — клиент2 Работа.

Онлайн мессенджер
Простаивает почти пустой оплаченный на долгое время хостинг, пришла в голову создать свой.

Мессенджер
В качестве темы для курсовой взял мессенджер, но он должен быть десктопным (требование к курсовой).

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

2664 / 2270 / 279
Регистрация: 24.12.2010
Сообщений: 13,723

Сообщение от ramzeswr

что использовать

При условиях халявного хостинга выбор, мягко сказать, невелик: стандартный убогий «набор джентльмена» — php-скрипты, работающие под Апачем, да учетная запись доступа к СУБД на местном MySql-сервере для организации и ведения своей БД.

Добавлено через 2 минуты

Сообщение от ramzeswr

и я должен всем им послать сообщение

Не пошлешь ты им ничего с халявного виртуального хоста — сами будут ходить и забирать адресованные им сообщения. Еще и в очередь придется им выстроиться.

Пишем свой ведосипед на Delphi

Добрый день, Хабраюзер. Скажу чесно, я люблю язык Delphi, и считаю, что его неоправданно забыли. А в этом топике, я бы хотел поделится с вами опытом написания чата. Дело это не очень сложное, но весьма и весьма забавное.

Подробности под катом.

Для написания этого самого чата я использовал IDE Borland Delphi 7 Lite сборку. Все библиотеки, которые понадобились уже были включены.

Часть I. Пишем интерфейс.

Собственно эта часть и есть наиболее легкая. Для начала, надо обдумать, как будет работать наш чат. Я остановился на ручном выборе порта, адреса сервера, и ника. В принципе, можно самому выбрать порт, и указать в исходном коду, но так мы можем запускать сколь угодно копий программы в режиме сервера, пока не кончаться порты. Итак, создаем четыре поля ввода, один элемент типа Memo, и три кнопки. Не забудьте добавить два сокета, серверный и клиентский. Пишем текст на кнопках. Название программы, иконку. И т.д. На этом, первая часть заканчивается.

Часть 2. Внутренности.

Здесь в принципе, работы немного, но она вся важная. Для начала пишем код для кнопок. Он находится ниже.

procedure TForm1 . Button1Click ( Sender : TObject ) ;
begin
button2 . Enabled : = false ; // Отключаем кнопку сервера
Clsocket . address : = edit1 . Text ;
Clsocket . Port : = StrtoInt ( edit2 . Text ) ; //Записываем порт, и IP
Clsocket . Active : = true ; //Включаем сокет
Clsocket . Open ; // Открываем его
button3 . enabled : = true ; //Разблокируем кнопку отправить
end ;

И примерно так же все остальные кнопки.

Для полей ввода ничего не надо.

Отдельно я хочу рассмотреть написание кода для кнопки отправки сообщения т. к. он очень важен.

procedure TForm1 . Button3Click ( Sender : TObject ) ;
var f : integer ; today : TdateTime ;
begin
today : = now ; //Узнаем время
s1 : = edit4 . Text ; //Формируем строку с ником и временем отправки
s2 : = edit3 . Text ;
s3 : = ‘[‘ + s2 + ‘] (‘ + TimetoStr ( today ) + ‘) :’ + s1 ; //Склеиваем все вместе
if clsocket . active = true then
ClSocket . Socket . SendText ( s3 ) //Отправляем на сервер строку
else
begin
for f : = 0 to SrSocket . Socket . ActiveConnections — 1 do //Отправляем от имени сервера всем клиентам
begin
Srsocket . Socket . Connections [ f ] . SendText ( s3 ) ;
end ;
Memo1 . lines . add ( s3 ) ; // Записывам себе сроку чата
end ;
edit4 . text : = » ;
end ;

И наконец, пишем код подключения\отключения\приема сообщения. Тут важно не забыть привязать ивенты к процедурам.

procedure TForm1 . SrsocketClientRead ( Sender : TObject ;
Socket : TCustomWinSocket ) ;
var i : integer ;
begin
Recieved : = Socket . ReceiveText ( ) ; //Переносим принятый текст в переменную
for i : = 0 to SrSocket . Socket . ActiveConnections — 1 do //Отправляем принятую инфу всем подключенным клиентам
Srsocket . Socket . Connections [ i ] . SendText ( Recieved ) ;
memo1 . Lines . add ( Recieved ) ; //Записываем себе
end ;

procedure TForm1 . SrSocketClientDisconnect ( Sender : TObject ;
Socket : TCustomWinSocket ) ;
begin
Memo1 . Lines . Add ( ‘Клиент отсоединился’ ) ; //Просто уведомляем сервер
end ;

procedure TForm1 . SrSocketClientConnect ( Sender : TObject ; Socket : TCustomWinSocket ) ;
begin
Memo1 . Lines . Add ( ‘Клиент подключился’ ) ;
end ;

Часть 3. Финальные тесты.

Эта часть является наиболее короткой. Добавляем в настройках проекта имя, версию, билд, и рисуем иконку.

Также, после некоторых поисков в интернете я нашел вот такой код для указания IP адреса, и включил его в свой чат.

function GetLocalIP : String ;
const WSVer = $101 ;
var
wsaData : TWSAData ;
P : PHostEnt ;
Buf : array [ 0 .. 127 ] of Char ;
begin
Result : = » ;
if WSAStartup ( WSVer , wsaData ) = 0 then begin //Я не хочу здесь что-то комментировать, т.к. до конца сам не уверен, как это работает
if GetHostName ( @ Buf , 128 ) = 0 then begin
P : = GetHostByName ( @ Buf ) ;
if P <> nil then
Result : = iNet_ntoa ( PInAddr ( p ^ . h_addr_list ^ ) ^ ) ;
end ;
WSACleanup ;
end ;
end ;

Собственно это и есть весь чат. Как видно, написать его очень просто. А я же вам просто благодарен за почтение этого поста.

• Delphi
• программирование

Delphi мессенджер. Какие компоненты использовать?

Пишу мессенджер на Delphi7. Прошу помощи: как сделать пользовательский интерфейс примерно как в телеграме, ватсаппе и т.д.

1. Какие компоненты использовать чтобы при нажатии на i-ую вкладку слева изменялось окно чата справа? (я не придумал ничего лучше PageControl)
2. Как(на каком компоненте) отображать исходящие и входящие сообщения и скроллить их? (у меня вообще нет идей как это делать)
3. Как сделать облако сообщения? Я имею ввиду, чтобы сообщения отображались не сплошным текстом, а были отделены как-то (я не придумал ничего лучше как много tMemo’ов, т.е. для каждого сообщения свой tMemo)

Знающие люди, подскажите, подкиньте идей, пожалуйста Буду очень благодарен

Отслеживать
задан 27 сен 2021 в 19:57
21 4 4 бронзовых знака

Я бы делал на двух tlistview tedit и tbutton. Но посмотрите на tvirtualstringtree и подобные сторонние компоненты

28 сен 2021 в 4:58
TVS тут явно не вариант на таком уровне.
28 сен 2021 в 13:18

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

в delphi есть все для этого кроме стандартного scrollbox который глючит когда тысячи сообщений там будет. поэтому сам писал свой скрол бокс который делился на 3 листа 1 что невидно снизу 2 что видно 3 что не видно сверху плюс динамическая подгрузка сообщений при скроле конечно в delphi есть все но все же вам придется писать свои компоненты на основе стандартных а пытаться найти что то готовое ничему не научит и не факт что на 100% они подойдут под вашу задумку.

1. Какие компоненты использовать чтобы при нажатии на i-ую вкладку слева изменялось окно чата справа? Я делал с помощью TPanel все и ее разновидностей PageControl стандартный не подойдет вообще. вам нужен полный доступ к окнам что бы на панель навесить другие панели а PageControl вкладка это не окно а просто отрисовка вкладки. поэтому создаете вначале скролл бокс который не будет глючить он у вас будет кастомным от него унаследуясь создаете отдельные скролбоксы для панели контактов и панели диалогов создаете все динамически и при создании на каждую ячейку скролбокса т.е контакта вешаете onlick в событии ContactClick(Sender:TObject) вы получите объект контакта а дальше загрузите для него историю диалога в скролбокс для диалога.
2. Как(на каком компоненте) отображать исходящие и входящие сообщения и скролить их?
   Только свой скрол бокс с нуля писать надо. другие варики плохо будут работать(я протестил все что можно, но только свой норм)
3. Как сделать облако сообщения? Я имею ввиду, чтобы сообщения отображались не сплошным текстом, а были отделены как-то допустим вы написали свой ScrollBox с нуля. TBoxHistory

каждый элемент TBoxHistory для истории диалога должен содержать какие то панели (TBoxHistoryItem) в свою очередь (TBoxHistoryItem) должна содержать несколько сообщений (TBoxHistoryItemContent) в ней может быть или текст или картинки или видео или все вместе (это то что видит юзер)

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

т.е схема такая

что использовать для отображения текста (тут у меня тоже есть вопросы), но я использовал TLabel (это менее затратно по ресурсам) но если юзер хочет выделить или скопировать то при клике TLabel заменятся на TMemo цветной когда операция завершена Tlabel обратно вернется на место.

Как создать приложение-чат за двадцать минут

Мой отец любит напоминать мне, что, будучи компьютерным инженером в 1970-х, «он был программистом до того, как программирование стало модным». Пару раз он даже показывал старые скрипты Fortran и COBOL. Прочитав этот код, я с уверенностью могу сказать, что программирование сегодня определенно круче.

Отличительная черта современных языков программирования и сред разработки — это то, насколько меньше кода приходится писать разработчику. Используя высокоуровневые языки вместе со множеством доступных API-интерфейсов, пакетов с открытым исходным кодом и платных сервисов, приложения — даже со сложными требованиями — можно создавать довольно быстро.

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

Сколько было бы построено небоскребов, если бы строители сами добывали себе сталь?

Разработчики ПО, которые продолжают работать и по сей день, на заре карьеры сами “рубили себе деревья”. При этом беспрецедентные инновации последнего десятилетия привели к тому, что индустрия программного обеспечения стала развиваться примерно так же, как и строительство.

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

Как сделать приложение для чата

Давайте быстро создадим что-нибудь, что раньше занимало бы дни или недели. Мы сделаем Public Chat Room приложение, которое использует WebSockets для обмена сообщениями в реальном времени.

WebSockets нативно поддерживаются всеми современными браузерами. Однако наша цель — выяснить, какие инструменты мы можем использовать в работе, а не изобретать их. Учитывая это, мы будем использовать следующие технологии:

• 8base — управляемый GraphQL API
• VueJS — JavaScript фреймворк

Кроме того, в видео ниже (на английском языке) более подробно объясняется каждый шаг.

Семь шагов для создания чат приложения:

1. Настройка проекта

Клонируйте стартовый проект и перейдите в директорию группового чата. Вы можете сами определить, использовать yarn или npm для установки зависимостей проекта. В любом случае, нам нужны все NPM пакеты, обозначенные в файле package.json.

# Клонируем проект git clone https://github.com/8base/Chat-application-using-GraphQL-Subscriptions-and-Vue.git group-chat # Переходим в директорию cd group-chat # Устанавливаем зависимости yarn

Чтобы взаимодействовать с GraphQL API, мы должны настроить три переменные среды. Создайте файл .env.local в корневой директории с помощью следующей команды, и приложение Vue после инициализации автоматически установит переменные среды, которые мы добавили в этот файл.

echo ‘VUE_APP_8BASE_WORKSPACE_ID=
VUE_APP_8BASE_API_ENDPOINT=https://api.8base.com
VUE_APP_8BASE_WS_ENDPOINT=wss://ws.8base.com’ \
> .env.local

Оба значения VUE_APP_8BASE_API_ENDPOINT и VUE_APP_8BASE_WS_ENDPOINT менять не нужно. Необходимо только установить значение VUE_APP_8BASE_WORKSPACE_ID .

Если у вас есть воркспейс 8base, который вы хотите использовать для создания чат-приложения по нашему руководству, обновите файл .env.local, указав свой идентификатор воркспейса. Если нет — получите идентификатор воркспейса, выполнив шаги 1 и 2 из 8base Quickstart.

2. Импорт схемы

Теперь нам нужно подготовить серверную часть. В корне этого репозитория вы должны найти файл chat-schema.json . Чтобы импортировать его в рабочую область, нужно просто установить командную строку 8base и залогиниться, а затем импортировать файл схемы.

# Установка 8base CLI yarn global add 8base-cli # Аутентификация CLI 8base login # Импортируем схему в нашу рабочую область 8base import -f chat-schema.json -w

3. Доступ к API

Последняя задача по бэкенду — разрешить публичный доступ к GraphQL API.

В консоли 8base перейдите в App Services > Roles > Guest . Обновите разрешения, установленные как для сообщений, так и для пользователей, чтобы они были или отмечены галочкой, или установлены как All Records (как показано на скриншоте ниже).

Роль Guest определяет, что разрешено делать пользователю, отправившему неаутентифицированный запрос к API.

Редактор ролей в консоли 8base.

4. Пишем GraphQL запросы

На этом этапе мы собираемся определить и выписать все запросы GraphQL, которые нам понадобятся для нашего компонента чата. Это поможет нам понять, какие данные мы будем читать, создавать и прослушивать (через WebSockets) с помощью API.

Следующий код следует поместить в файл src / utils / graphql.js . Прочтите комментарии над каждой экспортированной константой, чтобы понять, что выполняет каждый запрос.

 /* gql преобразует строки запроса в документы graphQL */ import gql from "graphql-tag"; ‍ /* 1. Получение всех пользователей онлайн-чата и последних 10 сообщений */ export const InitialChatData = gql` < usersList < items < id email >> messagesList(last: 10) < items < content createdAt author < id email >> > > `; ‍ /* 2. Создание новых пользователей чата и назначение им роли гостя */ export const CreateUser = gql` mutation($email: String!) < userCreate(data: < email: $email, roles: < connect: < name: "Guest" >> >) < id >> `; ‍ /* 3. Удаление пользователя чата*/ export const DeleteUser = gql` mutation($id: ID!) < userDelete(data: < id: $id, force: true >) < success >> `; ‍ /* 4. Подписка на создание и удаление пользователей чата */ export const UsersSubscription = gql` subscription < Users(filter: < mutation_in: [create, delete] >) < mutation node < id email >> > `; ‍ /* 5. Создание новых сообщений чата и связывание их с автором */ export const CreateMessage = gql` mutation($id: ID!, $content: String!) < messageCreate( data: < content: $content, author: < connect: < id: $id >> > ) < id >> `; ‍ /* 6. Подписка на создание сообщений чата. */ export const MessagesSubscription = gql` subscription < Messages(filter: < mutation_in: create >) < node < content createdAt author < id email >> > > `;

5. Настройка Apollo клиента для подписок

Когда наши запросы GraphQL написаны, самое время настроить наши модули API.

Во-первых, давайте займемся клиентом API с помощью ApolloClient с его обязательными настройками по умолчанию. Для createHttpLink мы предоставляем наш полностью сформированный эндпоинт воркспейса. Этот код находится в src/utils/api.js .

import < ApolloClient >from "apollo-boost"; import < createHttpLink >from "apollo-link-http"; import < InMemoryCache >from "apollo-cache-inmemory"; ‍ const < VUE_APP_8BASE_API_ENDPOINT, VUE_APP_8BASE_WORKSPACE_ID >= process.env; export default new ApolloClient(< link: createHttpLink(< uri: `$/$`, >), cache: new InMemoryCache(), >); // Note: Чтобы узнать больше о параметрах, доступных при настройке // ApolloClient, обратитесь к их документации.

Затем займемся клиентом подписки, используя subscriptions-transport-ws и isomorphic-ws . Этот код немного длиннее, чем предыдущий, поэтому стоит потратить время на чтение комментариев в коде.

Мы инициализируем SubscriptionClient , используя наш эндопоинт WebSockets и workspaceId в параметрах connectionParams . Затем мы используем этот subscriptionClient в двух методах, определенных в экспорте по умолчанию: subscribe() и close() .

subscribe позволяет нам создавать новые подписки с обратными вызовами данных и ошибок. Метод close — это то, что мы можем использовать, чтобы закрыть соединение при выходе из чата.

import WebSocket from "isomorphic-ws"; import < SubscriptionClient >from "subscriptions-transport-ws"; ‍ const < VUE_APP_8BASE_WS_ENDPOINT, VUE_APP_8BASE_WORKSPACE_ID >= process.env; /** * Создайте клиент подписки, используя соответствующие *переменные среды и параметры по умолчанию. */ const subscriptionClient = new SubscriptionClient( VUE_APP_8BASE_WS_ENDPOINT, < reconnect: true, connectionParams: < /** * Workspace ID ОБЯЗАТЕЛЬНО должен быть установлен, иначе *конечная точка Websocket не сможет *сопоставить запрос с соответствующим воркспейсом */ workspaceId: VUE_APP_8BASE_WORKSPACE_ID, >, >, /** * Конструктор для реализации WebSocket, совместимой с W3C. *Используйте это, если ваше окружение не имеет встроенного собственного *WebSocket (например, с клиентом NodeJS) */ WebSocket ); ‍ export default < /** * Принимает запрос подписки, любые переменные и обработчики колбэков *'data’ и 'error’ */ subscribe: (query, options) => < const < variables, data, error >= options; ‍ /** * Запускает новый запрос на подписку. */ const result = subscriptionClient.request(< query, variables, >); ‍ /** * Функцию отписки можно использовать для закрытия *определенной подписки, в отличие от ВСЕХ подписок, *поддерживаемых subscriptionClient */ const < unsubscribe >= result.subscribe( < /** * При получении события результат передается в *колбэк данных, указанный разработчиком. */ next(result) < if (typeof data === "function") < data(result); >>, /** * Каждый раз при получении ошибки она передается в колбэк ошибок, указанный разработчиком. */ error(e) < if (typeof error === "function") < error(e); >>, >); ‍ return unsubscribe; >, ‍ /** * Закрывает subscriptionClient соединение. */ close: () => < subscriptionClient.close(); >, >; // Примечание. Чтобы узнать больше о SubscriptionClient и его параметрах, // пожалуйста, обратитесь к их документации. 

6. Написание компонента Vue

Теперь у нас есть все необходимое для создания публичного чата. Осталось только написать один компонент GroupChat.vue .

Загрузите компонент с помощью yarn serve, и продолжим.

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

Скрипт компонента

Сначала нам нужно импортировать наши модули, простые стили и GraphQL запросы. Всё это находится в нашем каталоге src / utils .
Объявите следующие импорты в GroupChat.vue .

/* API модули */ import Api from "./utils/api"; import Wss from "./utils/wss"; /* graphQL операции */ import < InitialChatData, CreateUser, DeleteUser, UsersSubscription, CreateMessage, MessagesSubscription, >from "./utils/graphql"; ‍ /* Стили */ import "../assets/styles.css";

Компонентные данные

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

/* imports . */ export default < name: "GroupChat", ‍ data: () =>(< messages: [], newMessage: "", me: < email: "" >, users: [], >), >;

Хуки жизненного цикла

Наши хуки жизненного цикла выполняются в разные моменты «жизни» компонента Vue. Например, когда он монтируется или обновляется. В данном случае нас интересует только создание и beforeDestroy компонента. В таких случаях мы хотим либо открыть подписки на чат, либо закрыть.

/* ипорты. */ export default < /* остальные параметры . */ /** * Хук жизненного цикла, выполняющийся при создании компонента. */ created() < /** * Подписка на событие, которое срабатывает при создании или удалении пользователя */ Wss.subscribe(UsersSubscription, < data: this.handleUser, >); /** * Подписка на событие, которое срабатывает при создании сообщения */ Wss.subscribe(MessagesSubscription, < data: this.addMessage, >); /** * Получение начальные данные чата (пользователи и последние 10 сообщений) */ Api.query(< query: InitialChatData, >).then((< data >) => < this.users = data.usersList.items; this.messages = data.messagesList.items; >); /** * Колбэк вызывается при обновлении страницы, чтобы закрыть чат */ window.onbeforeunload = this.closeChat; >, ‍ /** * Хук жизненного цикла, выполняющийся при уничтожении компонента. */ beforeDestroy() < this.closeChat(); >, >;

Методы компонента

Мы должны добавить определенные методы, предназначенные для обработки каждого вызова / ответа API ( createMessage , addMessage , closeChat , и т.д.). Все они будут сохранены в объекте методов нашего компонента.
‍
Следует отметить одну вещь: большинство мутаций не ждут и не обрабатывают ответы. Это происходит потому, что у нас работают подписки, которые отслеживают эти мутации. После успешного запуска данные о событиях обрабатываются именно подпиской.
‍
Большинство этих методов говорят сами за себя. В любом случае, прочтите комментарии в следующем коде.

/* импорты . */ export default < /* остальные параметры . */ ‍ methods: < /** * Создание нового пользователя, используя указанный адрес электронной почты. */ createUser() < Api.mutate(< mutation: CreateUser, variables: < email: this.me.email, >, >); >, /** * Удалиние пользователя по его ID. */ deleteUser() < Api.mutate(< mutation: DeleteUser, variables: < id: this.me.id >, >); >, /** * Наши пользователи подписываются на события создания и обновления, и поэтому *нам нужно выбрать соответствующий метод для обработки ответа в зависимости от *типа мутации. * *Здесь у нас есть объект, который ищет тип мутации по имени, возвращает *его и выполняет функцию, передавая узел события. */ handleUser(< data: < Users: < mutation, node >, >, >) < (< create: this.addUser, delete: this.removeUser, >[mutation](node)); >, /** * Добавляет нового пользователя в массив users, сначала проверяя, *является ли добавляемый пользователь текущим пользователем. */ addUser(user) < if (this.me.email === user.email) < this.me = user; >this.users.push(user); >, /** * Удаляет пользователя из массива users по ID. */ removeUser(user) < this.users = this.users.filter( (p) =>p.id != user.id ); >, /* Создать новое сообщение */ createMessage() < Api.mutate(< mutation: CreateMessage, variables: < id: this.me.id, content: this.newMessage, >, >).then(() => (this.newMessage = "")); >, /** * Наша подписка на сообщения проверяет только событие создания. *Поэтому все, что нам нужно сделать, это поместить его в наш массив *сообщений. */ addMessage(< data: < Messages: < node >, >, >) < this.messages.push(node); >, /** * Мы хотим закрыть наши подписки и удалить пользователя. Этот метод можно вызвать в нашем хуке жизненного цикла beforeDestroy и любом другом соответствующем колбэке. */ closeChat () < /* Закрытие подписки перед выходом */ Wss.close() /* Удаление участника */ this.deleteUser(); /* Установка значения по умолчанию */ this.me = < me: < email: '' >> > >, ‍ /* Хуки . */ >

Шаблон компонента

И последнее, но не менее важное: у нас есть компонент GroupChat.vue .
‍
Есть тысячи отличных руководств о том, как создавать красивые пользовательские интерфейсы. Это — не одно из них.
‍
Следующий шаблон соответствует минимальным требованиям для чат-приложения. Делать его красивым или нет — это уже ваше дело. Тем не менее, давайте быстро пройдемся по ключевой разметке, которую мы здесь реализовали.
‍
Как всегда, читайте встроенные комментарии к коду.

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

7. Заключение и тестирование

В этом руководстве мы изучили, как использование современных инструментов разработки позволяет нам создавать реальные приложения за считанные минуты.

Надеюсь, вы также узнали, как инициализировать ApolloClient и SubscriptionClient для эффективного выполнения запросов GraphQL, мутаций и подписок в воркспейсе 8base, а также немного о VueJS.

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

Создайте чат-приложение с 8base

8base — это готовый к работе бессерверный бэкенд-как-сервис, созданный разработчиками для разработчиков. Платформа 8base позволяет разработчикам создавать потрясающие облачные приложения с использованием JavaScript и GraphQL. Узнайте больше о платформе 8base здесь.