В этом уроке мы создадим чат с прямым сообщением с списком контактов, используя Talkjs Chat API Анкет В чате отобразит список контактов, из которых пользователь может выбрать контакт и открыть Чатбокса с разговором (и историей этого разговора, если он существует).
Это похоже на функциональность, которую вы видите на таких платформах, как LinkedIn, WhatsApp и Telegram.
Настройка нашего чата
Первое, что мы сделаем, – это настроить основную HTML -страницу, на которой мы отобразим наш чат. На этой странице мы внедрим API TalkJS в сценарий, как указано в Руководство по началу работы Анкет
Начнем с создания div Чтобы удержать наш ящик для чата и список контактов, используя приведенный ниже код:
Contacts
Наш div будет два div S в нем с id s Talkjs-Container и контактный список соответственно. Мы также применяем некоторый базовый стиль, чтобы контакты-лист Div плавает в правой стороне Talkjs-Container дивизион
Список контактов
контактный список Div будет заполнен списком контактов, с которыми мы можем общаться. В производстве вполне вероятно, что эти пользователи будут извлечены из базы данных или в другом месте. В нашем случае мы создадим множество твердого кодированных пользователей. Массив будет содержать объекты пользователей, каждый из которых с id , имя и Photourl имущество.
Итак, мы добавляем следующий код в наш сценарий:
const contactsList = [
{
id: 1,
name: 'Lisa',
photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
},
{
id: 2,
name: 'Alice',
photoUrl: 'https://talkjs.com/images/avatar-2.jpg'
},
{
id: 3,
name: 'Tina',
photoUrl: 'https://talkjs.com/images/avatar-3.jpg'
},
{
id: 4,
name: 'Lee',
photoUrl: 'https://talkjs.com/images/avatar-4.jpg'
},
{
id: 5,
name: 'Pete',
photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
},
{
id: 6,
name: 'Dana',
photoUrl: 'https://talkjs.com/images/avatar-6.jpg'
},
{
id: 7,
name: 'Ro',
photoUrl: 'https://talkjs.com/images/avatar-7.jpg'
},
];
После настройки нашего массива пользователей, следующим шагом является отображение их в контакты-лист дивизион
Чтобы отобразить список контактов, мы будем проходить через ContactSlist Массив и используйте контактные объекты внутри этого массива, чтобы создать список контактов с именами пользователей и изображений профиля. Мы также сделаем контакты, кликабельными. Наконец, список отображается в контакты-лист дивизион
// Display contacts list on page
// Get contacts list container from the DOM
const contactsWrapper = document.getElementById('contacts-list');
// Loop through array and display each contact in contact-list div
for (let contact of contactsList) {
// Extract contact details
const id = contact.id;
const username = contact.name;
const photoUrl = contact.photoUrl;
//create img tag to hold contact pic, give it a class name (for styling purposes) and add photo to it
const contactPhoto = document.createElement('img');
contactPhoto.classList.add('contact-photo');
contactPhoto.src = photoUrl;
// Create div to hold contact Name and add name
const usernameDiv = document.createElement('div');
usernameDiv.classList.add('contact-name');
usernameDiv.innerText = username;
// Create contact parent div and add to it contactPhotoDiv and usernameDiv
const contactContainerDiv = document.createElement('div');
contactContainerDiv.classList.add('contact-container');
contactContainerDiv.appendChild(contactPhoto);
contactContainerDiv.appendChild(usernameDiv);
contactsWrapper.appendChild(contactContainerDiv);
};
Теперь, когда мы загрузили наш список контактов , Давайте добавим немного стиля, чтобы он выглядел лучше.
Стилизация списка контактов
Поскольку мы собираемся сделать немного стиля, мы откроем стиль Теги в верхней части нашей страницы и поместите там весь наш код CSS.
Мы хотим уменьшить размер изображений профиля, сделать их округлыми, а также пропустить имена справа от изображений профиля. Мы также добавим Hover Псевдо-класс так, чтобы пользователь мог легко увидеть, какой контакт он может выбрать, и изменить курсор на указатель, когда он парит над контактом.
Давайте добавим следующий код на нашу страницу:
Список контактов будет выглядеть как показано:
Загрузка чата
После отображения списка контактов мы теперь хотим инициализировать и загрузить наш интерфейс чата.
Мы начинаем с асинхронно Вызов Говорить объект. Как только обещание разрешено, остальная часть нашего кода загружается.
Talk.ready.then(function() {
...
})
Давайте создадим пользователя под названием я Кто сможет взаимодействовать с пользователями из нашего массива. Как упоминалось ранее, в производстве этот пользователь, вероятно, будет извлечен из базы данных или отправлен по сети в формате данных, таком как приведенный выше массив.
let me = new Talk.User({
id: '0',
name: 'Demi',
photoUrl: 'https://talkjs.com/images/avatar.jpg'
});
Затем мы используем Appid Чтобы начать и аутентифицировать наш чат Сессия С серверами TalkJS. Это Appid найдено в Talkjs Dashboard , и без него чат не загрузится.
Далее мы создаем и установим чат, где будет отображаться разговор:
const chatbox = talkSession.createChatbox();
chatbox.mount(document.getElementById('talkjs-container'));
Теперь мы хотим создавать разговоры между пользователем я и каждый из пользователей в ContactSlist множество. Здесь мы используем Array.prototype.map () Метод, который создает новый массив, заполненный результатами вызова предоставленной функции на каждом элементе в вызовом массива.
// Create conversationBuilder objects for each user
const conversations = contactsList.map(function(user, index) {
const talkUser = new Talk.User(user);
conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, talkUser));
conversation.setParticipant(me);
conversation.setParticipant(talkUser);
return conversation;
});
Подключение чата к списку контактов
Последний шаг – связать наши контакты с соответствующим чатом, так что, когда контакт выбирается, чат -ящик для этого конкретного разговора загружается.
Для этого нам нужно получить все экземпляры Контактный контактер Класс из DOM, поэтому мы можем прослушать, когда нажимают любой из контактов. Тогда мы добавляем Нажмите Слушатель событий в результирующем массиве и создайте обратный вызов, который вызывается, когда событие запускается.
let contactsListDivs = document.getElementsByClassName('contact-container');
conversations.forEach(function(conversation, index) {
contactsListDivs[index].addEventListener('click', function() {
chatbox.select(conversation);
});
});
}
Наш последний чат выглядит и функционирует, как показано ниже:
Ниже приведен полный код для этого урока.
Loading chat...Contacts
Дальнейшие настройки
Можно дополнительно настроить ваш чат, используя редактор тем, чтобы пользователь выглядел как WhatsApp , или Раздор или YouTube Анкет Проверьте больше уроков по Сайт TalkJS Анкет
Счастливого кодирования!
Оригинал: “https://dev.to/talkjs/create-a-direct-message-chat-with-a-contact-list-using-talkjs-2g2g”