Руководство по созданию чатов

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

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

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

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

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

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

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

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

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

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

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

Стартовый проект и полный файл README можно найти в этом репозитории GitHub. Если вы хотите просмотреть только готовое приложение, загляните в ветку public-chat-room.

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

Начнем.

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

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=<YOUR_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 <YOUR_8BASE_WORKSPACE_ID>

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: `${VUE_APP_8BASE_API_ENDPOINT}/${VUE_APP_8BASE_WORKSPACE_ID}`,
}),
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.
‍
Есть тысячи отличных руководств о том, как создавать красивые пользовательские интерфейсы. Это — не одно из них.
‍
Следующий шаблон соответствует минимальным требованиям для чат-приложения. Делать его красивым или нет — это уже ваше дело. Тем не менее, давайте быстро пройдемся по ключевой разметке, которую мы здесь реализовали.
‍
Как всегда, читайте встроенные комментарии к коду.

<template>
<div id="app">
  <!--
    Представление чата должно отображаться только в том случае, если текущий пользователь имеет идентификатор. В противном случае отображается форма регистрации..
    -->
  <div v-if="me.id" class="chat">
    <div class="header">
      <!--
        Поскольку мы используем подписки, которые работают в режиме реального времени, количество пользователей, которые сейчас находятся в сети, будет динамически корректироваться.
        -->
      {{ users.length }} Online Users
      <!--
       Пользователь может выйти из чата, вызвав функцию closeChat..
        -->
      <button @click="closeChat">Leave Chat</button>
    </div>
    <!--
    Каждое сообщение, которое мы храним в массиве сообщений, мы будем отображать в этом div. Кроме того, если идентификатор участника сообщения совпадает с идентификатором текущего пользователя, мы присвоим ему класс me.
      -->
    <div
      :key="index"
      v-for="(msg, index) in messages"
      :class="['msg', { me: msg.participant.id === me.id }]"
    >
      <p>{{ msg.content }}</p>
      <small
        ><strong>{{ msg.participant.email }}</strong> {{ msg.createdAt
        }}</small
      >
    </div>
    <!--
Инпут сообщения привязан к свойству данных newMessage.
      -->
    <div class="input">
      <input
        type="text"
        placeholder="Say something..."
        v-model="newMessage"
      />
      <!--
       Когда пользователь нажимает кнопку отправки, мы запускаем функцию createMessage.
        -->
      <button @click="createMessage">Send</button>
    </div>
  </div>
  <!--
   Процесс регистрации просит пользователя ввести адрес электронной почты. Как только инпут теряет фокус, вызывается метод createUser.
    -->
  <div v-else class="signup">
    <label for="email">Sign up to chat!</label>
    <br />
    <input
      type="text"
      v-model="me.email"
      placeholder="What's your email?"
      @blur="createUser"
      required
    />
  </div>
</div>
</template>

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

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

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

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

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

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

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

Стандартные требования к чату для сайта

Эффективное функционирование чата предполагает обязательное выполнение нескольких условий. Ключевыми из них выступают такие:

1. Корректное отображение сообщений на любых видах устройств – от персонального компьютера до смартфона.
2. Быстрая и четкая загрузка переписки без необходимости каждый раз обновлять страницу.
3. Интеграция с социальными сетями и/или популярными мессенджерами.
4. Доступность для пользователей дополнительных опций, способных разнообразить общение и сделать его более интересным, например, смайлики, стикеры, изображения или возможность записать аудио.

Этап №1. Программирование каркаса чата с помощью HTML

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

<div class='chat'>

<div class='chat-messages'>

<div class='chat-messages__content' id='messages'>

Загрузка...

</div>

</div>

<div class='chat-input'>

<form method='post' id='chat-form'>

<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'>

</form>

</div>

</div>

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

.chat {

border:1px solid #333;

margin:15px;

width:40%;

height:70%;

background:#555;

color:#fff;

}

.chat-messages {

min-height:93%;

max-height:93%;

overflow:auto;

}

.chat-messages__content {

padding:1px;

}

.chat__message {

border-left:3px solid #333;

margin-top:2px;

padding:2px;

}

.chat__message_black {

border-color:#000;

}

.chat__message_blue {

border-color:blue;

}

.chat__message_green {

border-color:green;

}

.chat__message_red {

border-color:red;

}

.chat-input {

min-height:6%;

}

input {

font-family:arial;

font-size:16px;

vertical-align:middle;

background:#333;

color:#fff;

border:0;

display:inline-block;

margin:1px;

height:30px;

}

.chat-form__input {

width:79%;

}

.chat-form__submit {

width:18%;

}

Этап №2. Программирование основной части чата посредством JS и PHP

На втором и главном этапе создания чата формируется его функционал. Необходимые для этого действия разбиваются на несколько отдельных стадий – по количеству функций. Для отправки и загрузки сообщений целесообразно задействовать AJAX. Основной функционал интерфейса и обмен данными с сервером программируется на JavaScript. Взаимодействие с базами данных и методы обработки последних пишутся на языке PHP.

Переменные на JavaScript

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

var messages__container = document.getElementById('messages'); 

//Контейнер сообщений — скрипт будет добавлять в него сообщения

var interval = null; //Переменная с интервалом подгрузки сообщений

var sendForm = document.getElementById('chat-form'); //Форма отправки

var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения

Запросы

Назначение функции запросов – получение переменной act, которая используется для хранения одного из трех возможных значений:

• авторизация (auth);
• загрузка (load);
• отправка (send).

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

function send_request(act, login = null, password = null) {//Основная функция

//Переменные, которые будут отправляться

var var1 = null;

var var2 = null;

if(act == 'auth') {

//Если нужно авторизоваться, получаем логин и пароль, которые были переданы в функцию

var1 = login;

var2 = password;

} else if(act == 'send') {

//Если нужно отправить сообщение, то получаем текст из поля ввода

var1 = messageInput.value;

}

$.post('includes/chat.php',{ //Отправляем переменные

act: act,

var1: var1,

var2: var2

}).done(function (data) { 

//Заносим в контейнер ответ от сервера

messages__container.innerHTML = data;

if(act == 'send') {

//Если нужно было отправить сообщение, очищаем поле ввода

messageInput.value = '';

}

});

}

Обновление

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

function update() {

send_request('load');

}

interval = setInterval(update,500);

sendForm.onsubmit = function () {

send_request('send');

return false; //Возвращаем ложь, чтобы остановить классическую отправку формы

};

session_start();//Подключение должно быть на первой строчке в коде, иначе появится ошибка

$db = mysqli_connect("localhost","login","password"); 

mysqli_select_db($db,"chat");

//Заносим данные админа в сессию

$_SESSION['login'] = 'admin';

$_SESSION['password'] = 'admin';

$_SESSION['id'] = 1;

Авторизация

Назначение функции – идентификация конкретного пользователя. Она обеспечивается по обычной схеме.

function auth($db,$login,$pass) {

//Находим совпадение в базе данных

$result = mysqli_query($db,"SELECT * FROM userlist WHERE login='$login' AND password='$pass'");

if($result) {

if(mysqli_num_rows($result) == 1) {//Проверяем, одно ли совпадение

$user = mysqli_fetch_array($result); //Получаем данные пользователя и заносим их в сессию

$_SESSION['login'] = $login;

$_SESSION['password'] = $pass;

$_SESSION['id'] = $user['id'];

return true; //Возвращаем true, потому что авторизация успешна

} else {

unset($_SESSION); //Удаляем все данные из сессии и возвращаем false, если совпадений нет или их больше 1

return false;

}

} else {

return false; //Возвращаем ложь, если произошла ошибка

}

}

Загрузка

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

function load($db) {

$echo = "";

if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Проверяем успешность авторизации

$result = mysqli_query($db,"SELECT * FROM messages"); //Запрашиваем сообщения из базы

if($result) {

if(mysqli_num_rows($result) >= 1) {

while($array = mysqli_fetch_array($result)) {//Выводим их с помощью цикла

$user_result = mysqli_query($db,"SELECT * FROM userlist WHERE id='$array[user_id]'");//Получаем данные об авторе сообщения

if(mysqli_num_rows($user_result) == 1) {

$user = mysqli_fetch_array($user_result);

$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b>$user[login]:</b> $array[message]</div>"; //Добавляем сообщения в переменную $echo

}

}

} else {

$echo = "Нет сообщений!";//В базе ноль записей

}

}

} else {

$echo = "Проблема авторизации";//Авторизация не удалась

}

return $echo;//Возвращаем результат работы функции

}

Отправка сообщений

Еще одна непростая для написания исходного кода функция. В самом лаконичном виде она создается следующим образом.

function send($db,$message) {

if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Если авторизация удачна

$message = htmlspecialchars($message);//Заменяем символы ‘<’ и ‘>’на ASCII-код

$message = trim($message); //Удаляем лишние пробелы

$message = addslashes($message); //Экранируем запрещенные символы

$result = mysqli_query($db,"INSERT INTO messages (user_id,message) VALUES ('$_SESSION[id]','$message')");//Заносим сообщение в базу данных

}

return load($db); //Вызываем функцию загрузки сообщений

}

Данный формат функции обладает минимальными возможностями отправки сообщений.

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

Вызов функций

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

Дополнительный функционал

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

• открытием специального кона и выбором из списка доступных нужного изображения;
• добавлением кода смайлика в поле ввода сообщения;
• заменой кода на изображение при выводе сообщения на экране получателя.

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

Быстрое создание чата – обзор готовых решений

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

1. Carrot quest. Обладает обширным функционалом, включающим: интеграцию с социальными сетями и мессенджерами, а также WordPress, детальную статистику, опцию сохранения переписки, версию для мобильных устройств и т.д.

   

2. LiveTex. Простой и удобный готовый онлайн-чат, который приспосабливается под нужды пользователя посредством множества настроек. Имеют мобильную версию, быстро и без проблем интегрируется с социальными сетями, обладает функцией приема платежей.
3. МультиЧат. Многофункциональный чат со стандартным набором возможностей – от обратного звонка доя автоматического сбора статистики. Бонусом становится специально разработанная форма заявки, которая используется для оформления заказа.
4. JivoSite. Лаконичный по оформлению и требуемым ресурсам онлайн-чат. Обладает обычным для подобных сервисов функционалом. В качестве дополнительной предоставляется опция для сбора лидов.

Что почитать и посмотреть по теме?

1. Учебник HTML для начинающих.
2. Руководство пользователя JavaScript.
3. Руководство пользователя по PHP.
4. М. В. Акулич «Чат-боты и маркетинг».
5. Срини Джанарсанам «Разработка чат-ботов и разговорных интерфейсов».
6. Видео ролик на YouTube «Создадим онлайн-чат на PHP и JavaScript».
7. Видео ролик на YouTube «Создание чата».
8. Видео ролик на YouTube «Простой чат на PHP. Часть 1».

FAQ

Для чего создаются онлайн-чаты?

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

Какие требования предъявляются к чату в современных условиях?

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

Как создать онлайн-чат самостоятельно?

Чтобы сделать это, необходимо сначала написать каркаса чата (обычно – с применением HTML), а затем добавить к нему функционал (в этом случае чаще всего используются PHP и JavaScript).

Можно ли воспользоваться готовыми решениями?

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

Подведем итоги

1. Онлайн-чат – удобный, доступный и бюджетный способ создать новый канал связи с посетителями сайта, благодаря чему повысить продажи, поднять уровень трафика или увеличить лояльность к интернет-ресурсу.
2. Современные требования к чату – корректная работа на разных устройствах, интеграция с социальными сетями и мессенджерами, появление новых сообщений без необходимости обновлять страницу, дополнительные опции в виде смайликов и т.д.
3. Простой чат вполне реально разработать самостоятельно – с использованием базовых знаний по программированию на HTML, PHP и JavaScript (возможные и другие варианты по языкам разработки).
4. Альтернативный способ решения задачи – приобретение готового онлайн-чата с последующей настройкой под запросы пользователя.

<div class='chat'>
	<div class='chat-messages'>
		<div class='chat-messages__content' id='messages'>
			Загрузка...
		</div>
	</div>
	<div class='chat-input'>
		<form method='post' id='chat-form'>
			<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> <input type='submit' class='chat-form__submit' value='=>'>
		</form>
	</div>
</div>

.chat {
	border:1px solid #333;
	margin:15px;
	width:40%;
	height:70%;
	background:#555;
	color:#fff;
}

.chat-messages {
	min-height:93%;
	max-height:93%;
	overflow:auto;
}

.chat-messages__content {
	padding:1px;
}

.chat__message {
	border-left:3px solid #333;
	margin-top:2px;
	padding:2px;
}

.chat__message_black {
	border-color:#000;
}

.chat__message_blue {
	border-color:blue;
}

.chat__message_green {
	border-color:green;
}

.chat__message_red {
	border-color:red;
}

.chat-input {
	min-height:6%;
}
input {
	font-family:arial;
	font-size:16px;
	vertical-align:middle;
	background:#333;
	color:#fff;
	border:0;
	display:inline-block;
	margin:1px;
	height:30px;
}

.chat-form__input {
	width:79%;
}

.chat-form__submit {
	width:18%;
}

var messages__container = document.getElementById('messages'); 
//Контейнер сообщений — скрипт будет добавлять в него сообщения

var interval = null; //Переменная с интервалом подгрузки сообщений

var sendForm = document.getElementById('chat-form'); //Форма отправки
var messageInput = document.getElementById('message-text'); //Инпут для текста сообщения

function send_request(act, login = null, password = null) {//Основная функция
	//Переменные, которые будут отправляться
	var var1 = null;
	var var2 = null;
	
	if(act == 'auth') {
		//Если нужно авторизоваться, получаем логин и пароль, которые были переданы в функцию
		var1 = login;
		var2 = password;
	} else if(act == 'send') {
//Если нужно отправить сообщение, то получаем текст из поля ввода
		var1 = messageInput.value;
	}
	
	$.post('includes/chat.php',{ //Отправляем переменные
		act: act,
		var1: var1,
		var2: var2
	}).done(function (data) { 
		//Заносим в контейнер ответ от сервера
		messages__container.innerHTML = data;
		if(act == 'send') {
			//Если нужно было отправить сообщение, очищаем поле ввода
			messageInput.value = '';
		}
	});
}

function update() {
	send_request('load');
}
interval = setInterval(update,500);

sendForm.onsubmit = function () {
	send_request('send');
	return false; //Возвращаем ложь, чтобы остановить классическую отправку формы
};

session_start();//Подключение должно быть на первой строчке в коде, иначе появится ошибка
$db = mysqli_connect("localhost","login","password"); 
mysqli_select_db($db,"chat");
//Заносим данные админа в сессию
$_SESSION['login'] = 'admin';
$_SESSION['password'] = 'admin';
$_SESSION['id'] = 1;

function auth($db,$login,$pass) {
	//Находим совпадение в базе данных
	$result = mysqli_query($db,"SELECT * FROM userlist WHERE login='$login' AND password='$pass'");
	if($result) {
		if(mysqli_num_rows($result) == 1) {//Проверяем, одно ли совпадение
			$user = mysqli_fetch_array($result); //Получаем данные пользователя и заносим их в сессию
			$_SESSION['login'] = $login;
			$_SESSION['password'] = $pass;
			$_SESSION['id'] = $user['id'];
			return true; //Возвращаем true, потому что авторизация успешна
		} else {
			unset($_SESSION); //Удаляем все данные из сессии и возвращаем false, если совпадений нет или их больше 1
			return false;
		}
	} else {
		return false; //Возвращаем ложь, если произошла ошибка
	}
}

function load($db) {
	$echo = "";
	if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Проверяем успешность авторизации
		$result = mysqli_query($db,"SELECT * FROM messages"); //Запрашиваем сообщения из базы
		if($result) {
			if(mysqli_num_rows($result) >= 1) {
				while($array = mysqli_fetch_array($result)) {//Выводим их с помощью цикла
					$user_result = mysqli_query($db,"SELECT * FROM userlist WHERE id='$array[user_id]'");//Получаем данные об авторе сообщения
					if(mysqli_num_rows($user_result) == 1) {
						$user = mysqli_fetch_array($user_result);
						$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b>$user[login]:</b> $array[message]</div>"; //Добавляем сообщения в переменную $echo
					}
				}
			
			} else {
				$echo = "Нет сообщений!";//В базе ноль записей
			}
		}
	} else {
		$echo = "Проблема авторизации";//Авторизация не удалась
	}
	
	return $echo;//Возвращаем результат работы функции
}

function send($db,$message) {
	if(auth($db,$_SESSION['login'],$_SESSION['password'])) {//Если авторизация удачна
		$message = htmlspecialchars($message);//Заменяем символы ‘<’ и ‘>’на ASCII-код
		$message = trim($message); //Удаляем лишние пробелы
		$message = addslashes($message); //Экранируем запрещенные символы
		$result = mysqli_query($db,"INSERT INTO messages (user_id,message) VALUES ('$_SESSION[id]','$message')");//Заносим сообщение в базу данных
	}
	return load($db); //Вызываем функцию загрузки сообщений
}

//Получаем переменные из супермассива $_POST
//Тут же их можно проверить на наличие инъекций
if(isset($_POST['act'])) {$act = $_POST['act'];}
if(isset($_POST['var1'])) {$var1 = $_POST['var1'];}
if(isset($_POST['var2'])) {$var2 = $_POST['var2'];}

switch($_POST['act']) {//В зависимости от значения act вызываем разные функции
	case 'load': 
		$echo = load($db); //Загружаем сообщения
	break;
	
	case 'send': 
		if(isset($var1)) {
			$echo = send($db,$var1); //Отправляем сообщение
		}
	break;
	
	case 'auth': 
		if(isset($var1) && isset($var2)) {//Авторизуемся
			if(auth($db,$var1,$var2)) {
				$echo = load($db);
			}
		}
	break;
}

echo $echo;//Выводим результат работы кода

$.post('includes/chat.php',{
	act: act,
	var1: var1,
	var2: var2
}).done(function (data) {
	messages__container.innerHTML = data;
	if(data == 'Проблема авторизации') {
		clearInterval(interval); //Если проблема авторизации, отключаем автообновление
		if(login == null && password == null) {
			login = prompt('Введите логин: ');//Запрашиваем логин
			if(login != null) {
				password = prompt('Введите пароль: ');//Запрашиваем пароль
				send_request('auth',login,password); //Отправляем еще один запрос
			}
		}
	} 
	if(act == 'auth') {
		interval = setInterval(update,500); //Заново запускаем автообновление
	}
	if(act == 'send') {
		messageInput.value = '';
	}
});

<form method='post' id='chat-form'>
<div class='emojis-container emojis-container_hidden' id='emojis'></div>
	<img src='/images/emojis/happy.png' class='emoji-img' id='emoji-button'>
<input type='text' id='message-text' class='chat-form__input' placeholder='Введите сообщение'> 
<input type='submit' class='chat-form__submit' value='=>'>
</form>

.emojis-container {
	position:absolute;
	z-index:100;
	background:#555;
	border:1px solid #333;
	padding:2px;
	max-width:38%;
	top:20px;
}

.emojis-container_hidden {
	left:-9999999999999999px;
}

.emoji-img {
	vertical-align:middle;
	width:20px;
	margin:1px;
	cursor:pointer;
}

//Создаем переменные
var emojis__container = document.getElementById('emojis');
var emojis__button = document.getElementById('emoji-button');
var showed = false;

function getEmojis() {//Получаем смайлики из PHP-файла
	$.post('/includes/chat.php',{act: 'load-emojis'}).done(function (data) {
		emojis__container.innerHTML = data;
	});
}

function showEmojis() {//Добавляем отображение и скрытие окна
	if(showed) {
		emojis__container.setAttribute('class','emojis-container emojis-container_hidden');
		showed = false;
	} else {
		emojis__container.setAttribute('class','emojis-container');
		showed = true;
	}
}

function addEmoji(title) {
	messageInput.value += " " + title + " ";
//Тут же можно добавить закрытие контейнера
messageInput.focus();
}

$(document).ready(function (){
	$(".emoji-add").on("click", function () {addEmoji($(this).attr('title'));});//Добавление
});
emojis__button.addEventListener('click',showEmojis); 

getEmojis(); //Сразу же вызываем получение смайликов

function getEmojis() {
	$dir = '../images/emojis';
	$echo = "";
	$files = scandir($dir);
	
	for($i = 0; $i != count($files); $i++) {
		$ext = explode('.',$files[$i]);
		if($ext[1] == 'png') {
			$echo .= "<img src='/images/emojis/".$files[$i]."' title=':"</span>.$ext[<span class="hljs-number" style="color: #ff73fd;">0</span>].<span class="hljs-string" style="color: #a8ff60;">":' class='emoji-img emoji-add'> ";
		} 
	}
	return $echo;
}

case 'load-emojis': 
	$echo = getEmojis();
break;

function transformEmoji($message) {
	$pattern = '/(:S*:)/i'; //Паттерн смайлика
	if(preg_match($pattern,$message,$matches)) {//Ищем все совпадения для смайлика одного типа — только :happy: или только :sad:
		$path = explode(":",$matches[0]);
		if(file_exists("../images/emojis/".$path[1].".png")) {//Проверяем, существует ли такое изображение
			$message = preg_replace("/".$matches[0]."/","<img src='/images/emojis/$path[1].png' class='emoji-img'>",$message);//Заменяем код на изображение
		}
		$message = transformEmoji($message); //Повторяем, пока в $message есть коды смайликов
	}
	return $message;
}

$array['message'] = transformEmoji($array['message']);

$echo .= "<div class='chat__message chat__message_$user[nick_color]'><b><span class='answer-span'>$user[login]</span>:</b> $array[message]</div>";

function addAnswer(login) {
	messageInput.value = login + ", " + messageInput.value;
	messageInput.focus();
}

$(document).ready(function (){
	$(".add-answer").on("click", function () {addEmoji($(this).text());});
});

Научитесь: Веб-разработчик с нуля до PRO
Узнать больше

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

Что представляет собой онлайн-чат

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

Возможности чата:

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

Система привычна по мессенджерам вроде WhatsApp, Telegram. Она позволяет избежать барьера между продавцом и покупателем, которому некомфортно звонить и разговаривать голосом. Плюс не приходится ждать, когда менеджер обработает заявку, поступившую с формы обратной связи. У посетителя создается уверенность, что ему помогут в любое время и по любому вопросу. Благодаря такому подходу повышается лояльность потенциальных клиентов.

Зачем нужен чат

И это еще не все преимущества чата на сайте. В нем проще обмениваться цифровой информацией, наименованием моделей, номерами счетов. Виджет также поддерживает отправку файлов в форматах картинки, текста, голосового сообщения. Менеджеры свободно общаются одновременно с двумя и более клиентами. Чат на сайте – инструмент для повышения конверсии этапа воронки после клика по рекламе или ссылке в поиске. Трафик всегда ограничен семантикой, бюджетом на продвижение, что и приводит к внедрению решений по увеличению отдачи от каждого посетителя. Статистика пользователей чатов показывает, что их применение увеличивает средний чек, экономит время на возврат товара, снижает риски жалоб, негативных отзывов из-за длительного ожидания ответа. Клиент обрабатывается на момент «горячей» заинтересованности, а не потом, когда у него появились другие неотложные дела, или его успел забрать себе конкурент.

Преимущества для бизнеса

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

Руководитель (владелец) бизнеса получает:

• снижение затрат на обработку заказов;
• возможность онлайн-отслеживания разговоров;
• создание базы для рекламных рассылок.

Последнее особо интересно в направлении уменьшения стоимости заявки. Если впервые лид может прийти по относительно дорогой контекстной рекламе, при его конвертации в клиента только после рассылки на e-mail произойдет снижение средних затрат на привлечение. Без бота сбор контактных данных пришлось бы делать вручную.

Как сделать чат эффективным

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

1. Подготовьте список часто задаваемых вопросов. При использовании чат-бота ответы на них будут отправляться автоматически.
2. Подключите чат к CRM, e-Commerce. Интеграция канала в систему сквозной аналитики дает возможность получать оперативные данные по работе отдела продаж, подробные отчеты.
3. Используйте программный интерфейс API. Он заметно упростит интеграцию со сторонними сервисами.

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

Специальные функции онлайн-чата

Нормой считается включение в виджет дополнительного функционала вроде оценки разговора или обязательного сохранения истории диалогов. Если предусмотреть такие возможности, статистика будет пополняться маркетинговыми данными, а менеджеры получат доступ к прежней переписке сразу после ввода контактов. Разработка мобильного приложения для чата на сайте позволит находиться онлайн в любое время суток, независимо от места нахождения оператора. Также полезна функция переадресации вопросов между сотрудниками. Она позволяет передавать технические вопросы профильному специалисту или разгружать персонал в пиковые периоды. То же относится к возможности прикреплять файлы. При грамотном построении работы они сразу же будут подгружаться в CRM, и не понадобится отдельно списываться для их отправки.

Нужна ли интеграция с дизайном

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

Важные моменты:

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

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

Готовое решение или отдельная разработка?

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

• открытый код, отсутствуют ограничения по доработкам;
• полноценная интеграция с ИТ-инфраструктурой компании;
• программа в точности соответствует бизнес-процессам.

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

Этапы создания чата для сайта

Перед составлением технического задания на создание чата в обязательном порядке проводится аудит бизнес-процессов. Это позволяет полностью оценить имеющуюся IT-инфраструктуру, чтобы новый продукт соответствовал концепции организации Data Driven. Такой подход дает возможность перевести бизнес на цифровой формат, когда любое решение принимается согласно точным данным.

Шаги по разработке:

1. Сбор, анализ требований.
2. Составление, согласование ТЗ.
3. Написание кода.
4. Тестирование ПО.

На последнем этапе возможны доработки, если клиент расширил перечень требований, выяснил, что при согласовании ТЗ упустил важные моменты. Это несколько удорожает внедрение ПО, зато результат будет в точности соответствовать пожеланиям.

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

Russian (Pусский) translation by Alexey Malyutin (you can also view the original English article)

В этом уроке мы будем создавать простое приложение веб-чата с помощью PHP и jQuery. Утилита такого типа прекрасно подойдет для системы онлайн-поддержки вашего сайта.

Введение

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

Шаг 1: HTML разметка

Мы начнем этот урок с создания нашего первого файла index.php.

1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2

<html xmlns="http://www.w3.org/1999/xhtml">

3

<head>

4

<title>Chat - Customer Module</title>

5

<link type="text/css" rel="stylesheet" href="style.css" />

6

</head>

7

8

<div id="wrapper">

9

  <div id="menu">

10

		<p class="welcome">Welcome, <b></b></p>

11

		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>

12

		<div style="clear:both"></div>

13

	</div>

14

15

	<div id="chatbox"></div>

16

17

	<form name="message" action="">

18

		<input name="usermsg" type="text" id="usermsg" size="63" />

19

		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />

20

	</form>

21

</div>

22

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

23

<script type="text/javascript">

24

// jQuery Document

25

$(document).ready(function(){

26

27

});

28

</script>

29

</body>

30

</html>

• Мы начнем наш html с обычных DOCTYPE, html, head, и body тагов. В таг head мы добавим наш заголовок и ссылку на нашу таблицу стилей css (style.css).
• Внутри тага body, мы структурируем наш макет внутри блока — обертки #wrapper div. У нас будет три главных блока: простое меню, окно чата и поле ввода нашего сообщения; каждый со своим соответствующим div и id.
  • Блок меню #menu div будет состоять из двух абзацев. Первый будет приветствием пользователю и поплывет налево, а второй будет ссылкой на выход и поплывет направо. Мы также включим блок div для очистки элементов.
  • Блок чата #chatbox div будет содержать лог нашего чата.  Мы будем загружать наш лог из внешнего файла с использованием ajax-запроса jQuery.  
  • Последним пунктом в нашем блоке-обертке #wrapper div будет наша форма, которая будет включать в себя текстовое поле ввода для сообщения пользователя и кнопку отправки.
• Мы добавляем наши скрипты последними, чтобы грузить страницу быстрее. Сначала мы вставим ссылку Google jQuery CDN, так как в этом уроке мы будем использовать библиотеку jQuery. Наш второй таг скрипта будет там, где мы будем работать. Мы загрузим весь наш код после того, как документ будет готов.

Шаг 2: Создание стиля CSS

Теперь мы добавим немного css, чтобы заставить наше приложение чата выглядеть лучше, чем стиль браузера по умолчанию. Код, указанный ниже будет добавлен в наш файл style.css.

1

2

/* CSS Document */

3

body {

4

	font:12px arial;

5

	color: #222;

6

	text-align:center;

7

	padding:35px; }

8

9

form, p, span {

10

	margin:0;

11

	padding:0; }

12

13

input { font:12px arial; }

14

15

a {

16

	color:#0000FF;

17

	text-decoration:none; }

18

19

	a:hover { text-decoration:underline; }

20

21

#wrapper, #loginform {

22

	margin:0 auto;

23

	padding-bottom:25px;

24

	background:#EBF4FB;

25

	width:504px;

26

	border:1px solid #ACD8F0; }

27

28

#loginform { padding-top:18px; }

29

30

	#loginform p { margin: 5px; }

31

32

#chatbox {

33

	text-align:left;

34

	margin:0 auto;

35

	margin-bottom:25px;

36

	padding:10px;

37

	background:#fff;

38

	height:270px;

39

	width:430px;

40

	border:1px solid #ACD8F0;

41

	overflow:auto; }

42

43

#usermsg {

44

	width:395px;

45

	border:1px solid #ACD8F0; }

46

47

#submit { width: 60px; }

48

49

.error { color: #ff0000; }

50

51

#menu { padding:12.5px 25px 12.5px 25px; }

52

53

.welcome { float:left; }

54

55

.logout { float:right; }

56

57

.msgln { margin:0 0 2px 0; }

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

Как вы можете видеть выше, мы закончили строить пользовательский интерфейс чата.

Шаг 3: Используем PHP, чтобы создать форму входа.

Теперь мы реализуем простую форму, которая будет спрашивать у пользователя его имя, перед тем, как пустить его дальше.

1

<?

2

session_start();

3

4

function loginForm(){

5

	echo'

6

	<div id="loginform">

7

	<form action="index.php" method="post">

8

		<p>Please enter your name to continue:</p>

9

		<label for="name">Name:</label>

10

		<input type="text" name="name" id="name" />

11

		<input type="submit" name="enter" id="enter" value="Enter" />

12

	</form>

13

	</div>

14

	';

15

}

16

17

if(isset($_POST['enter'])){

18

	if($_POST['name'] != ""){

19

		$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));

20

	}

21

	else{

22

		echo '<span class="error">Please type in a name</span>';

23

	}

24

}

25

?>

Функция loginForm(), которую мы создали, состоит из простой формы входа, которая спрашивает у пользователя его/ее имя. Затем мы используем конструкцию if else, чтобы проверить, ввел ли пользователь имя. Если человек ввел имя, мы устанавливаем его, как $_SESSION[‘имя’]. Так как мы используем сессию, основанную на cookie, чтобы хранить имя, мы должны вызвать session_start() перед тем, как что-нибудь выводить в браузер.

Есть одна вещь, на которую вы возможно захотите обратить особое внимание — то, что мы использовали функцию htmlspecialchars(), которая конвертирует специальные символы в HTML сущности, тем самым защищая имя переменной, чтобы оно не стало жертвой межсайтового скриптинга (XSS). Мы также добавим эту функцию позже к текстовой переменной, которая будет опубликована в логе чата.

Отображение формы входа

Для того, чтобы показать форму логина в случае, если пользователь не вошел в систему, и следовательно, не сессия не создалась, мы используем другую инструкцию if else вокруг блока-обертки #wrapper div и тагов скрипта в нашем исходном коде. В противоположном случае, если пользователь вошел в систему и создал сессию, этот код спрячет форму входа и покажет окно чата.

1

<?php

2

if(!isset($_SESSION['name'])){

3

	loginForm();

4

}

5

else{

6

?>

7

<div id="wrapper">

8

	<div id="menu">

9

		<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

10

		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>

11

		<div style="clear:both"></div>

12

	</div>	

13

	<div id="chatbox"></div>

14

15

	<form name="message" action="">

16

		<input name="usermsg" type="text" id="usermsg" size="63" />

17

		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />

18

	</form>

19

</div>

20

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

21

<script type="text/javascript">

22

// jQuery Document

23

$(document).ready(function(){

24

});

25

</script>

26

<?php

27

}

28

?>

Приветствие и меню выхода из системы

Мы еще не закончили создавать систему входа для этого приложения чата. Нам еще нужно дать пользователю возможность выйти из системы и закончить сессию чата. Как вы помните, наша исходная HTML разметка включала в себя простое меню. Давайте вернемся назад и добавим некоторый PHP код, который придаст меню больше функциональности.

Прежде всего, давайте добавим имя пользователя в сообщение приветствия. Мы сделаем это, выводя сессию имени пользователя.

1

<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>

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

1

<script type="text/javascript">

2

// jQuery Document

3

$(document).ready(function(){

4

	//If user wants to end session

5

	$("#exit").click(function(){

6

		var exit = confirm("Are you sure you want to end the session?");

7

		if(exit==true){window.location = 'index.php?logout=true';}		

8

	});

9

});

10

</script>

Код jquery, приведенный выше просто показывает диалог подтверждения, если пользователь кликнет по ссылке выхода #exit. Если пользователь подтвердит выход, тем самым решив закончить сессию, мы отправим его в index.php?logout=true. Это просто создаст переменную с именем logout со значением true. Мы должны перехватить эту переменную с помощью PHP:

1

if(isset($_GET['logout'])){	

2

3

	//Simple exit message

4

	$fp = fopen("log.html", 'a');

5

	fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");

6

	fclose($fp);

7

8

	session_destroy();

9

	header("Location: index.php"); //Redirect the user

10

}

Теперь мы увидим, существует ли get переменная ‘logout’, используя функцию isset(). Если переменная была передана через url, такой, как ссылка, упомянутая выше, мы переходим к завершению сессии пользователя с текущим именем.

Перед уничтожением сессии пользователя с текущим именем с помощью функции session_destroy() мы хотим выводить простое сообщение о выходе в лог чата. В нем будет сказано, что пользователь покинул сессию чата. Мы сделаем это, используя функции  fopen(), fwrite() и fclose(), чтобы манипулировать нашим файлом log.html, который, как мы увидим позднее, будет создан в качестве лога нашего чата. Пожалуйста, обратите внимание, что мы добавили класс ‘msgln’ в блок div. Мы уж определили стиль css для этого блока.

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

Шаг 4: Поддержка пользовательского ввода данных

После того, как пользователь подтвердил свои действия в нашей форме, нам нужно захватывать его ввод с клавиатуры и писать его в лог нашего чата. Для того, чтобы сделать это, мы должны использовать jQuery и PHP, чтобы работать синхронно на стороне сервера и на стороне клиента.

jQuery

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

1

	//If user submits the form

2

	$("#submitmsg").click(function(){	

3

		var clientmsg = $("#usermsg").val();

4

		$.post("post.php", {text: clientmsg});				

5

		$("#usermsg").attr("value", "");

6

		return false;

7

	});

1. Перед тем, как мы что-то начнем делать, мы должны захватить пользовательский ввод, или то, что он напечатал в поток ввода #submitmsg. Этого можно достигнуть функцией val(), которая берет значение, установленное в поле формы. Теперь мы сохраняем это значение в переменную clientmsg.
2. Вот и наступает самая важная часть: запрос jQuery post. Она отправляет запрос POST в файл post.php, который мы создадим через мгновение. Он отправляет ввод клиента, или то, что было сохранено в переменную clientmsg.
3. В конце мы очищаем ввод #usermsg, очищая атрибут значения.

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

PHP — post.php

На данный момент мы имеем данные POST, отправляемые в файл post.php каждый раз, когда пользователь отправляет форму и посылает новое сообщение. Наша задача теперь захватить эти данные и записать их в лог нашего чата.

1

<?

2

session_start();

3

if(isset($_SESSION['name'])){

4

	$text = $_POST['text'];

5

6

	$fp = fopen("log.html", 'a');

7

	fwrite($fp, "<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");

8

	fclose($fp);

9

}

10

?>

1. Прежде чем мы что-либо сделаем, мы должны начать файл post.php с помощью функции session_start(), так как мы будем использовать сессию по имени пользователя в этом файле.
2. Используя логическую isset, мы проверим, существует ли сессия для ‘name’, перед тем, как что-то делать дальше.
3. Теперь мы захватим данные POST, которые jQuery послал в этот файл. Мы сохраним эти данные в переменную $text.
4. Эти данные, так же, как и вообще все данные, вводимые пользователем, будут храниться в файле log.html. Чтобы сделать это, мы откроем файл в режиме ‘a’ функции fopen, который согласно php.net открывает файл только для записи; помещает указатель файла на конец файла. Если файл не существует, попытаемся создать его. Затем мы запишем наше сообщение в файл, используя функцию fwrite().
   • Сообщение, которое мы будем записывать, будет заключено внутри блока .msgln div. Он будет содержать дату и время, сгенерированную функцией date(), сессию имени пользователя и текст, которые также будет окружен функцией htmlspecialchars(), чтобы избежать XSS.

   И наконец, мы закрываем наш файл с помощью fclose().

Шаг 5: Отображение содержимого лога чата (log.html)

Все, что пользователь разместил, обработано и опубликовано с помощью jQuery; оно записано в лог чата с помощью PHP. Единственное, что осталось сделать — это показать обновленный лог чата пользователю.

Чтобы сэкономить нам немного времени, мы предварительно загрузим лог чата в блок #chatbox div, как если бы он что-то содержал.

1

	<div id="chatbox"><?php

2

	if(file_exists("log.html") && filesize("log.html") > 0){

3

		$handle = fopen("log.html", "r");

4

		$contents = fread($handle, filesize("log.html"));

5

		fclose($handle);

6

7

		echo $contents;

8

	}

9

	?></div>

Мы используем процедуру, похожую на ту, что мы использовали в файле post.php, но на этот раз мы только читаем и выводим содержимое файла.

Запрос jQuery.ajax

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

1

//Load the file containing the chat log

2

	function loadLog(){		

3

4

		$.ajax({

5

			url: "log.html",

6

			cache: false,

7

			success: function(html){		

8

				$("#chatbox").html(html); //Insert chat log into the #chatbox div				

9

		  	},

10

		});

11

	}

Мы завернем наш ajax запрос в функцию. Вы увидите, зачем, прямо сейчас. Как вы можете видеть выше, мы использовали только три из объектов запроса jQuery ajax.

• url: Строка URL для запроса. Мы используем имя файла лога нашего чата log.html.
• cache: Это предотвратит кэширование нашего файла. Это обеспечит нам то, что всегда, когда мы посылаем запрос, мы будем иметь обновленный лог чата.
• sucess: Это позволит нам прикрепить функцию, которая передаст запрошенные нами данные.

Как вы видите, затем мы перемещаем запрошенные нами данные (html) в блок #chatbox div.

Автопрокрутка

Как мы, возможно, видели в других приложениях чатов, содержимое автоматически прокручивается вниз, если контейнер лога чата (#chatbox) переполняется. Мы воплотим простую и похожую возможность, которая будет сравнивать высоту полосы прокрутки контейнера до и после того, как мы выполним ajax запрос. Если высота полосы прокрутки стала больше после запроса, мы используем эффект анимации jQuery, чтобы прокрутить блок #chatbox div.

1

	//Load the file containing the chat log

2

	function loadLog(){		

3

		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request

4

		$.ajax({

5

			url: "log.html",

6

			cache: false,

7

			success: function(html){		

8

				$("#chatbox").html(html); //Insert chat log into the #chatbox div	

9

10

				//Auto-scroll			

11

				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request

12

				if(newscrollHeight > oldscrollHeight){

13

					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div

14

				}				

15

		  	},

16

		});

17

	}

• Сначала мы сохраним высоту полосы прокрутки блока  #chatbox div в переменную oldscrollHeight перед выполнением запроса.
• После того, как наш запрос вернет успех, мы сохраним высоту полосы прокрутки блока #chatbox div в переменную newscrollHeight.
• Затем мы сравним высоту полосы прокрутки в обеих переменных, используя конструкцию if. Если newscrollHeight больше, чем oldscrollHeight, мы используем эффект анимации, чтобы прокрутить блок #chatbox div.

Постоянное обновление лога чата

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

1

setInterval (loadLog, 2500);	//Reload file every 2500 ms or x ms if you wish to change the second parameter

Ответ на наш вопрос находится в функции setInterval. Эта функция будет запускать нашу функцию loadLog() каждые 2,5 секунды, которая будет запрашивать обновленный файл и делать автопрокрутку блока.

Закончили

Мы закончили! Я надеюсь, что вы изучили, как работает базовая система чата, и, если у вас есть какие-либо пожелания, я с радостью их приветствую. Это максимально простая система чата, которую вы можете создать как приложение чата. Вы можете оттолкнуться от нее и построить множественные чат комнаты, добавить админку, эмотиконы и т.д. Здесь ваш предел — это небо.

Ниже привожу несколько ссылок, которые вы возможно захотите посмотреть, если задумаетесь о расширении этого приложения чата:

• Защитите ваши формы ключами форм — избегайте XSS (межсайтового скриптинга) и подделок межсайтовых запросов.
• Отправка формы без обновления страницы с использованием jQuery — расширьте наш ajax запрос
• Как делать AJAX запросы на чистом Javascript  — изучите, как работает кухня запросов на чистом javascript.

• Следите за нами на Twitter, или подпишитесь на RSS ленту NETTUTS, чтобы получать больше ежедневных уроков и статей по веб-разработке.

Доброго времени суток!

Для работы большинства популярных мессенджеров (Skype, Telegram, Viber и др.) требуется доступ к сети Интернет (причем, стабильный доступ!). А что если нужно быстро обмениваться сообщениями и файлами в локальной сети, — среди компьютеров, где такого доступа нет или он не стабильный? (да хоть дома, даже если у вас всего 2-3 ПК/ноутбука, подключенных к одному роутеру)

Вот тут как раз может помочь свой локальный чат, — который будет работать вне зависимости от сбоев Интернета (кстати, в компаниях и организациях — вещь вообще не заменимая!). Да и скорость обмена файлами в таком чате будет явно повыше, чем в популярных мессенджерах! Чем не выход?!

Собственно, в этой заметке хочу привести пример подобного локального чата (который очень быстро развертывается и настраивается // причем без всяких специальных знаний 🙂).

Итак…

*

Простейший пример установки и настройки чата

ШАГ 1: выбор ПО

В своей заметке я решил остановиться на продукте «MyChat» — это клиент-серверный чат, подходящий для передачи сообщений и обмена файлами как дома, так и в офисе или компании (офиц. сайт разработчиков: 📌https://nsoft-s.com/).

Свой пример ниже я подробно разберу по шагам именно в «MyChat».

Чем он интересен:

1. во-первых, он очень легко и просто запускается, и настраивается. Даже если вы совсем не разбираетесь — вам потребуется 5-10 мин. времени, чтобы выполнить мой пример; 🙂
2. во-вторых, «MyChat» поддерживает как групповые чаты (может быть несколько комнат), так и личные сообщения;
3. в-третьих, можно обмениваться картинками, файлами;
4. в-четвертых, сервер работает только в вашей сети, переписка не попадает в Интернет (а значит это безопасно!);
5. в-пятых, «MyChat» предоставляет систему уведомлений, которая позволяет быть в курсе всех новостей и обновлений в команде;
6. в-шестых, есть возможность совершения аудио-звонков.

В общем-то, весьма добротный набор для самых разных задач! 👌

*

ШАГ 2: установка сервера (выбор «главного» ПК)

Для начала нужно выбрать тот компьютер, который будет основным (обычно в роли сервера выбирают тот ПК, который работает дольше, чем все остальные).

На этот один ПК нужно установить «MyChat сервер» (это обычный EXE-файл, устанавливается стандартно) — приложение можно загрузить с офиц. сайта: 📌https://nsoft-s.com/downloadmychat.html

Кстати, при установке «MyChat сервер» нужно будет указать свой e-mail и название компании (может быть любым), а также настроить авто-запуск (см. пару скринов ниже). 👇

После того, как приложение будет установлено и сервер будет запущен — вы заметите, что у вас в трее (в нижнем углу, рядом с часами) появиться соотв. значок в виде ПК — нажав по нему появится окно (как у меня на скрине ниже). Если всё так — значит чат запущен! 👌

Кстати, в верхней части окна «MyChat Server» обратите внимание на его IP-адрес (в моем случае он 192.168.1.2). Он будет нужен нам для дальнейшей настройки.

📌 В помощь!

Как узнать IP-адрес компьютера, ноутбука (а также, что такое локальный и внешний IP, динамический и статический — в чем разница) — https://ocomp.info/kak-uznat-ip-adres.html

Кстати, IP-адрес компьютера также можно посмотреть в 📌настройках вашего роутера/маршрутизатора.

*

ШАГ 3: установка клиента и подкл. к серверу (вход в чат)

Теперь нужно на все ПК/ноутбуки (на которых должен использоваться чат) — установить клиент «MyChat». Загрузить его можно также с офиц. сайта: 📌https://nsoft-s.com/downloadmychat.html

👉👉 Обратите внимание!

В заметке я рассмотрю стандартную установку и настройку клиента. Но есть и более простой вариант: он разобран на одной из страничек офиц. сайта.

Установка клиента проходит стандартно, в особых комментариях не нуждается… 👇

При первом запуске клиента «MyChat» — нужно будет «кое-что» настроить. На этом остановлюсь…

Окно приветствия можно сразу же пропустить, нажав на «Далее». 👇

Далее лучше сразу выбрать пункт «Я знаю адрес сервера и укажу его вручную» (авто-поиск срабатывает далеко не всегда, в моем случае ни разу).

Далее указываем тот IP-адрес компьютера, на котором у нас был запущен сервер (см. предыдущий шаг; в моем случае — это IP 192.168.1.2), и нажимаем кнопку «Проверить».  Если указали адрес правильно — загорится зеленая галочка… Можно нажать «Далее». 👇

Рекомендую сразу же создать новую учетную запись: потребуется указать имя пользователя и пароль.

Собственно, на этом всё! Клиент подключиться к серверу, вы сможете войти в одну из конференций и написать свое первое сообщение. 👇

*

ШАГ 4: начинаем обмен сообщениями

Для начала общения следует войти в нужную конференцию (в моем примере она называется «По работе»). Далее справа вы увидите список участников, по центру — сам чат, и окно отправки текстовых сообщений. Достаточно набрать что-нибудь и нажать на кнопку отправки, она с «Самолетиком» .

В окне чата появится само сообщение и имя участника. 👇

А в нижнем углу экрана, в трее, всплывет небольшое окно-уведомление о новом сообщении в чате. Удобно! Благодаря таким уведомлениям все участники быстро узнают о новой вводной… 🙂

*

ШАГ 5: что есть еще интересного

1) Приватные сообщения

Чтобы отправить кому-нибудь из участников чата личное сообщение (которое будет видно только ему!) — достаточно нажать по нику правой кнопкой мыши, и в меню выбрать «Открыть приват». 👇

Далее можно спокойно общаться с пользователем в личном диалоге…

2) Отправка файлов, ссылок и картинок

Чтобы отправить другому пользователю какой-нибудь файл — достаточно в меню чата нажать по кнопке со скрепкой «Вставить» (см. пример ниже). 👇 Всё просто!

3) Доп. инструменты

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

В общем-то, если вам нужен простой чат — то на это можно не обращать внимание… 🙂

4) Свой персональный профиль лучше заполнить чуть подробнее: ФИО, почта, какие-то интересы (особенно, если у вас в сети есть 2-3 Александра, например 🙂, а то все будут пытаться «кто есть кто»).

5) Кстати, у клиента «MyChat» достаточно много настроек: звуки, события, горячие клавиши, интерфейс и т.д. См. скрин ниже. 👇

6) Кстати, есть также приложение для смартфона (одноименное, «MyChat»). Загрузить и установить можно с Play Market. Большая часть функций, что есть в клиенте для Windows — есть и тут…

Ссылка на Play Market: https://play.google.com/store/apps/details?id=com.nss.mychat&hl=ru&gl=US&pli=1

*

Выводы

Если говорить в целом — то приложение свою задачу решает, если не на 5, то на 4 уж точно! Чат работает стабильно, уведомления приходят, файлы пересылаются, группы создаются, вроде бы ничего нигде не виснет и не тормозит. И главное, «это добро» можно быстро установить и настроить! 👌

Также понравилось, что у «MyChat» есть рус. поддержка, много инструкций на сайте разработчика. Думаю, что за небольшую плату — вам даже смогут настроить чат под любые тонкости вашей сети…

С другой стороны: есть, конечно, и несколько минусов (но они не критичны, по крайней мере, если вы ищите именно чат/мессенджер, а не комбайн).

Минусы:

1. приложение бесплатное только при усл. что у вас в сети <20 пользователей (для дома этого хватит, а вот для офиса или организации — уже нет. Впрочем, цены весьма доступны…);
2. простенький дизайн (+ не все элементы поддерживают масштабирование Windows). Но в принципе, пользоваться это не мешает 🙂;
3. когда все пользователи покидают комнату (конференцию) — она автоматически «исчезает» из меню клиента. Эта штука (как по мне) не очень удобна. Чтобы это «устранить» — нужно создать «авто-возобновляемую» конференцию (правда, до этого пришлось «додуматься», сходу это не так очевидно);
4. подозреваю, что на некоторых ПК могут быть проблемы с аудио-звонками (в настройках программы нужно правильно задать параметры звука: выбрать микрофон, наушники и пр. Мне это было без надобности, поэтому на этом я не зацикливался… 🙂).

*

Иные дополнения по теме — приветствуются в комментариях ниже.

За сим откланиваюсь, удачи!

👋