Эта статья является частью цикла из двух частей на тему «Как создать чат в веб-приложении с помощью Robin».
Итак, давайте начнем.
Мгновенное удовлетворение и быстрое принятие решений стали основными движущими факторами, привлекающими внимание пользователей к любому современному веб-приложению. Живой чат — одна из тех функций, которые предлагают пользователям именно это. Пользователю достаточно набрать вопрос, и уже через несколько минут он получает ответ.
Более 70% компаний B2C и B2B используют услуги чата как часть своей клиентской стратегии, и, согласно исследованиям, это обеспечивает самый высокий уровень удовлетворенности клиентов.
В этой серии статей, состоящей из двух частей, я покажу вам, как вы можете интегрировать Robin в ваше веб-приложение, используя Javascript и Vue SDK Robin. Robin — это решение для обмена сообщениями в чате, которое позволяет пользователям и разработчикам использовать API чата и SDK для создания обмена сообщениями в приложении, не заботясь о реализации сложных функций.
Предварительные условия
Чтобы следовать этому руководству, у вас должно быть следующее:
- Любой фронтенд-фреймворк на ваш выбор
- Ключ API Robin
- Бэкенд-сервер для получения данных из базы данных (можно использовать любой на ваш выбор).
Для демонстрационных целей демо-приложение, используемое в этой статье, было создано с помощью Next.JS, но вы можете следовать этому руководству, используя любой фронтенд-фреймворк по вашему выбору.
CryptoDegen — это децентрализованный аналитический инструмент, который позволяет пользователям отслеживать свои цифровые активы.
Вы можете получить API-ключ Robin из своего аккаунта Robin. Это даст вам право доступа к функциям Robin.
Инициализация Robin Javascript SDK
Чтобы инициализировать Robin Javascript SDK, сначала необходимо установить SDK в ваше фронтенд-приложение.
Для установки просто скопируйте и вставьте следующий код в терминал:
npm install robin.io-js --save
Прежде чем инициализировать Robin, зайдите в свой аккаунт Robin и получите API-ключ. Рекомендуется хранить его в надежном месте, например, в переменных окружения.
После того, как вы сохранили API-ключ, можно приступать к инициализации Robin в вашем приложении.
Создайте новую страницу src/pages/index.tsx:
// index.tsx
import { useState, useEffect } from 'react'
import Message from '../components/Message'
import { Robin } from 'robin.io-js'
const Home: NextPage = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false)
const [userData, setUserData] = useState({} as ObjectType)
const apiKey = 'NT-XmIzEmWUlsrQYypZOFRlogDFvQUsaEuxMfZf'
const channel = 'private_chat'
const [robin, setRobin] = useState(null as Robin | null)
const initiateRobin: () => void = () => {
const robinInstance = new Robin(apiKey, true)
setRobin(robinInstance)
}
return (
<Message isLoggedIn={isLoggedIn} robin={robin} channel={channel} userData={userData} />
)
}
export default Home
Поместите функцию initiateRobin в хук useEffect(), чтобы гарантировать, что Robin будет инициирован сразу после загрузки Dom.
// index.tsx
useEffect(() => {
initiateRobin()
}, [])
Создание токена пользователя Robin
Этот учебник имитирует процесс входа пользователя во фронтенд, чтобы смоделировать, как это — аутентифицировать реального пользователя или создать нового, а затем назначить ему токен пользователя Robin с внутреннего сервера.
Создайте метод createUserToken(), в котором вы будете создавать токен пользователя Robin:
const createUserToken: (data: ObjectType) => Promise<string> = async (data: ObjectType) => {
const response: ObjectType = await robin?.createUserToken({
meta_data: {
...data
},
});
return response.data.user_token
}
Далее создайте метод mockUserLogin():
// index.tsx
const mockUserLogin: () => Promise<void> = async () => {
const userPromise: Promise<ObjectType> = new Promise((resolve, _reject): ObjectType => {
return setTimeout(async () => {
const data: ObjectType = {
first_name: 'Enoch',
last_name: 'Chejieh',
username: 'Enoch Chejieh',
email: 'enoch11@gmail.com'
} as ObjectType
data.user_token = await createUserToken(data)
resolve({ data })
}, 100)
})
const response: ObjectType = await userPromise
setUserData({ ...userData, ...response.data })
setIsLoggedIn(true)
}
Далее создайте функцию mockUserSignup():
// index.tsx
const mockUserSignup: () => Promise<void> = async () => {
const userPromise: Promise<ObjectType> = new Promise((resolve, _reject): ObjectType => {
return setTimeout(async () => {
const data = {
first_name: 'Enoch',
last_name: 'Chejieh',
username: 'Enoch Chejieh',
email: 'enoch11@gmail.com'
} as ObjectType
data.user_token = await createUserToken(data)
resolve({ data })
}, 100)
})
const response : ObjectType = await userPromise
setUserData({ ...userData, ...response.data })
setIsLoggedIn(true)
}
Далее создайте функцию mockUserLogout():
// index.tsx
const mockUserLogout = () => {
setIsLoggedIn(false)
}
Вам нужно будет создать эти функции для имитации процессов аутентификации пользователей.
Обработка событий
Robin отправляет различные события, которые вы можете прослушивать, такие как user.connect, user.disconnect, new.conversation, message. forward, message.reaction, message.remove.reaction, remove.group.participant, read.reciept, и group.icon.update.
Прежде чем прослушать диспетчеризированное событие, нам нужно установить соединение с WebSocket Robin.
Создайте компонент src/components/message.tsx, скопируйте и вставьте следующий код:
// message.tsx
import { useState, useEffect, useRef } from 'react'
import { Robin } from 'robin.io-js'
type ObjectType = Record<string, any>
interface PropTypes { isLoggedIn: boolean, robin: Robin | null, channel: string, userData: ObjectType }
const Message: React.FC<PropTypes> = ({ isLoggedIn, robin, channel, userData }) => {
const message: any = useRef(null)
const [isMessagerOpen, setIsMessagerOpen] = useState(false)
const [connection, setConnection] = useState(null as any)
const connect: () => void = () => {
const connectionInstance = robin?.connect(userData?.user_token)
setConnection(connectionInstance)
const WebSocket: WebSocket | undefined = connection
window.onbeforeunload = function () {
WebSocket?.close()
}
}
return (...)
}
export default Message
Метод connect() используется для установления соединения с WebSocket Robin.
После того как мы установили соединение WebSocket.
Далее необходимо обработать события. Скопируйте и вставьте следующий код в ваш компонент src/components/message.tsx:
// message.tsx
useEffect(() => {
if (isLoggedIn) {
if (connection) {
connection.onopen = () => {
robin?.subscribe(channel, connection as WebSocket)
}
connection.onmessage = (event: any) => {
const message = JSON.parse(event.data)
if (!message.is_event) {
if (message.conversation_id === conversation._id) {
setConversationMessages((messages) => [...messages, message])
}
} else {
handleRobinEvents(message)
}
}
connection.onclosed = () => {
connect()
}
} else {
connect()
}
}
}, [isLoggedIn, connection, conversation])
const handleRobinEvents: (message: ObjectType) => void = (message: ObjectType) => {
switch (message.name) {
case 'user.connect':
// Event dispatched when WebSocket connection is established.
break
case 'user.disconnect':
// Event dispatched when the WebSocket connection has been disconnected.
break
case 'new.conversation':
// Event dispatched when a new conversation is created.
break
case 'message.forward':
// Event dispatched when a message is forwarded.
break
case 'message.reaction':
// Event dispatch when message reaction has been added.
break
case 'message.remove.reaction':
// Event dispatched when a message reaction has been removed.
break
case 'remove.group.participant':
// Event dispatched when a group participant has been removed.
break
case 'read.reciept':
// Event dispatched when a message has been read.
break
case 'group.icon.update':
// Event dispatched when a group icon has been updated.
break
default:
break
}
}
Метод Robin subscribe() используется для подписки вашего соединения Robin на имя канала. Это необходимо для отправки сообщений.
Создание беседы
После того, как вы установили соединение с WebSocket Robin, можно приступать к созданию беседы.
Создайте функцию createConversation() в вашем компоненте src/components/message.tsx:
// message.tsx
const createConversation: () => Promise<void> = async () => {
setIsMessagesLoading(true)
const response = await robin?.createConversation({
sender_name: userData.username,
sender_token: userData.user_token,
receiver_token: receiverToken,
receiver_name: receiverName
})
if (response && !response.error) {
setConversation({ ...conversation, ...response.data })
}
}
Метод Robin createConversation() принимает в качестве параметра объект, который должен содержать ключ и значение sender_name, sender_token, receiver_token и receiver_name.
Получение сообщений беседы
Для получения сообщений из беседы создайте функцию getMessages() в вашем src/components/message.tsx компоненте:
// message.tsx
const getMessages: () => Promise<void> = async () => {
setIsMessagesLoading(true)
const response = await robin?.getConversationMessages(conversation._id, userData.user_token)
if (response && !response.error) {
setIsMessagesLoading(false)
if (response.data) setConversationMessages((messages) => [...messages, ...response.data])
}
}
Эта функция вызывается, как только Компонент src/components/message.tsx устанавливается на Dom и извлекает сообщения из предоставленного conversation_id.
Метод Robin getConversationMessages() принимает два параметра conversation_id и user_token.
Отправка сообщения в беседу
Далее, для обработки отправки сообщений, вам необходимо создать функцию sendMessage в вашем компоненте src/components/message.tsx:
// message.tsx
const sendMessage: () => Promise<void> = async () => {
const messageObject: ObjectType = {
msg: message.current.value,
sender_token: userData.user_token,
receiver_token: receiverToken,
timestamp: new Date()
}
await robin?.sendMessageToConversation(
{
...messageObject
},
connection,
channel,
conversation._id,
userData.user_token,
userData.username
)
message.current.value = ''
}
Метод Robin sendMessageToConversation принимает несколько параметров, которые включают message_object, connection, channel, connection_id, user_token, и username.
Отправка сообщения с вложением в беседу
Далее, для обработки отправки вложений сообщения, вам нужно создать функцию sendMessageAttachment() в вашем src/components/message.tsx компоненте:
// message.tsx
const sendMessageAttachment: (file: File) => void = async (file: File) => {
await robin?.sendMessageAttachment(userData.user_token, conversation._id, file, userData.username, '')
message.current.value = ''
}
Метод Robin sendMessageAttachment принимает несколько параметров, которые включают user_token, conversation_id, username, и message.
Заключение
В этой части вы узнали, как инициализировать Robin, создавать беседы, пользовательские токены, получать сообщения, отправлять сообщения и многое другое.
Robin сыграл важную роль в создании функции Live Chat в приложении CryptoDegen, использованном в этой статье, так как он легко интегрируется и помогает в поддержке клиентов.
Робин также предоставляет другие API, которые используются в Javascript SDK. Чтобы посмотреть больше, ознакомьтесь с ними здесь.
У Robin есть множество SDK для различных фреймворков и языков, таких как Javascript, Vue, Flutter, Go и Python, чтобы поддержать различные потребности разработчиков.
Вы можете получить исходный код в этом репозитории и посмотреть демо-версию в действии.
В следующей части мы рассмотрим, как можно использовать Vue SDK Robin для взаимодействия с пользовательскими сообщениями из службы поддержки клиентов.