0-1 Построить интеллектуальную систему обслуживания клиентов с интерфейсом обмена мгновенными сообщениями

Node.js

I. Предыстория

После того, как в основном все продукты компании будут запущены, пользователи столкнутся со многими проблемами во время использования.Чтобы решить эти проблемы в режиме реального времени и эффективно, многие продукты компании будут подключены к системе ручного обслуживания клиентов на каждой стороне пользователя.Эти системы обслуживания клиентов есть сторонние SaaS-продукты, такие как Зубы мудрости, Udesk и т. д., которые также разрабатываются самой компанией.Если это разрабатывается самой компанией, как мы можем быстро получить ручную систему обслуживания клиентов


Интеллектуальное обслуживание клиентов ICBC

2. Система обслуживания клиентов

Простая система обслуживания клиентов состоит из нескольких основных функций:

  1. Вопросы и ответы вручную
  2. Вопросы и ответы о роботах
  3. Приглашение к просмотру
  4. Система агента по обслуживанию клиентов
  5. система управления сессиями

Фиг Framework:


Гостевой терминал — это пользовательский сенсорный терминал (терминал c), а терминал c выполняет три основные функции:

  1. искусственный разговор
  2. Оценка удовлетворенности
  3. сеанс бота

письмо-соглашение:

  1. Длинная ссылка: websocket+ssl
  2. Короткая ссылка: http + ssl

Искусственный сеанс в основном представляет собой функцию обмена мгновенными сообщениями. Функции включают в себя обычные текстовые сообщения, форматированный текст, изображения, видео, отправку файлов и т. д. Основным протоколом связи является веб-сокет, а сеанс робота может напрямую использовать http. Давайте объясним, как быстро реализовать Простая c-сторона системы обслуживания клиентов.

3. Технический отбор

Vue/React + Nodejs/Java + socket.io + Http

4. Конкретная реализация

1. Реализуйте сервер обмена мгновенными сообщениями на Nodejs или Java.

Это можно увидеть в конкретной документации socket.io, socket.io предоставляет SDK для большинства языков Node/Java/C# и т. д., которые могут легко реализовать простой сервер обмена мгновенными сообщениями.

2. Внешний интерфейс реализует интерфейс чата обслуживания клиентов.

  • Район ввода пользователя
  • ОБСЛУЖИВАНИЕ КЛИЕНТОВ / РОБОТОВА
  • Поле ввода
  • Поле выбора эмодзи
  • Окно выбора изображения и видео

Конкретную реализацию не нужно объяснять.В vue/react реализовать эти функции очень просто.В основном мы рассмотрим основную часть внешнего интерфейса обмена мгновенными сообщениями и способы связи с сервером обмена мгновенными сообщениями через socket.io.

3. Основная часть кода

Установочный пакет socket.io-client npm

import io from 'socket.io-client'

Инициализировать веб-сокет

this.socket = io(this.$config.socketUrl, {
    transports: ['websocket'],
    path: '/ws/im'
})

Слушайте различные пользовательские события

Отображение данных страницы может быть выполнено с помощью различных пользовательских событий.Многие собственные события socket.io могут отслеживать ссылки на веб-сокеты, переподключение, исключения и т. д.

/*
 * 处理系统消息
 */
this.socket.on('session', data => {
  // todo
})

/*
 * 处理人工消息
 */
this.socket.on('message', data => {
  // todo
})

/*
 * 监听链接事件
 */
this.socket.on('connect', data => {
  // todo
})
/*
 * 监听重连事件
 */
this.socket.on('reconnect', data => {
  // todo
})

4. Обнаружение сердцебиения, отключение и повторное подключение

При выполнении функции обмена мгновенными сообщениями вы столкнетесь со многими проблемами. Основная проблема заключается в том, что когда пользователь переключает приложения во время использования или сеть прерывается, веб-сокет автоматически отключается. Во время отключения служба поддержки клиентов отправит вам сообщение. Вы не можете его увидеть. Даже если сеть вернется в нормальное состояние, вы не сможете нормально получать офлайн-сообщения. Чтобы убедиться, что веб-сокет возвращается в нормальное состояние после отключения и повторного подключения пользователя, требуется обнаружение сердцебиения.

основной код

/*
 * 开启心跳检测
 */
 startHeartbeat () {
     window.clearTimeout(this.heartBeatTimer)
     window.clearTimeout(this.closeHeartBeatTimer)
     this.heartbeatEvent()
},

/*
 * websocket心跳检测 
 */
heartbeatEvent () {
    this.heartBeatTimer = setTimeout(() => {
        this.sendHeartbeat()
        this.closeHeartBeatTimer = setTimeout(() => {
            // socket.close() //此处不能主动断开socket
        }, this.closeHeartBeatDelay)
    }, this.heartBeatDelay)
 },

 /*
  * 发送心跳事件
  */
sendHeartbeat () {
    socket.emit('heartbeat', 'heartbeat', e => {
        this.startHeartbeat()
     })
}

Когда начать обнаружение сердцебиения, вы можете начать обнаружение сердцебиения при инициализации Socket.IO для прослушивания событий Connect

/*
 * 监听链接事件
 */
this.socket.on('connect', data => {
   this.startHeartbeat()
})

5. Навыки отладки веб-сокетов

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

Пример URL запроса ws: wss://www.baidu.com/ws/im/?EIO=3&transport=websocket


V. Резюме

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


Категории