HasChat: основанное на Vue3+socket.io приложение для чата

На основе Vue3 + socket.io разработано приложение для чата.

Бесплатное открытое ПО! Ваша звезда — моя мотивация!

Введение

После создания собственного приложения для обслуживания клиентов, я всё чаще слышу призывы разработать полноценное приложение для общения. Поскольку моё предыдущее приложение не было компонентным и имело проблемы с дизайном пользовательского интерфейса, оно не казалось мне достаточно совершенным. Поэтому в свободное время я создал более полное приложение для общения — HasChat. Это веб-приложение для общения, созданное с использованием новейших технологий.

• Веб-версия для ПК: Vue3 + Vite + TypeScript + Pinia + Naive UI + Socket.io.
• Мобильная версия для ПК: uni-app + Socket.io.
• Серверная часть: Express.js.

Цель моего открытого исходного кода — помочь новичкам в этой области, независимо от того, являются ли они фронтенд- или бэкенд-разработчиками.

Предварительный просмотр

Изображение	Описание

Онлайн-просмотр

HasChat для ПК.

HasChat-приложение для мобильных устройств.

Обзор функций

• Вход в систему и случайный выбор пользователя для входа.
• Отправка кода подтверждения по электронной почте для регистрации.
• Отправка текстовых сообщений с эмодзи.
• Отправка изображений и просмотр больших изображений.
• Enter отправляет сообщение, enter+ctrl вводит новую строку.
• Уведомления о сообщениях.
• Метки непрочитанных сообщений.
• История разговоров.
• Журнал чата.
• Переключение тем.
• Отправка видео.
• Отправка аудио (доступно только на мобильных устройствах).

Версии

• Фронтенд: без различий в версиях.
• Бэкенд: две версии — mysql (ветка main) и json (ветка master); версия json предназначена для новичков, которые не знакомы с mysql.

Развёртывание среды

Node.Js >= 15.0.0
Mysql >= 5.7.0 (требуется только для версии mysql, но для выполнения файлов mysql требуется версия 8.0 или выше)

Загрузка проекта

Фронтенд

https://gitee.com/howcode/has-chat.git

Бэкенд mysql версия

git clone -b main https://gitee.com/howcode/has-chat-service.git

Бэкенд json версия

git clone -b master https://gitee.com/howcode/has-chat-service.git

Запуск проекта

Установка зависимостей

Фронтенд и бэкенд

npm install

Конфигурация mysql (пропустить версию json)

В версии mysql найдите каталог store в файлах sql и запустите их.

const db = mysql.createConnection({
  host: "", // 主机地址 （默认：localhost）
  user: "", // 用户名
  password: "", // 密码
  database: "", // 数据库
});

Для получения дополнительной информации см.: nodejs-mysql.

Настройка электронной почты (пропустите версию json)

Найдите файл config.js.

emailConfig: { //邮箱配置
    host: "smtp.qq.com",//邮箱服务器  这里我用的QQ邮箱
    port: 465,//邮箱使用端口
    secure: true,//是否使用默认的465端口
    auth: {
      user: "", // 发送方邮箱地址
      pass: "" // smtp 验证码
    }
  }

Подробности использования см. в статье: nodejs 发送邮箱信息.

Запуск проекта/сервиса

• Бэкэнд

node app.js

• Фронтенд

npm run dev

Теперь проект готов к запуску.

Видеоуроки

Создание проекта HasChat локально.

Развёртывание проекта HasChat на сервере Bao'ta.

От покупки сервера до развёртывания проекта HasChat на Bao'ta.

Структура проекта

haschat
├── src
│       └── api                           // 接口文件
│       └── assets                        // 资源文件
│           └── css                       // css样式
│           └── emo                       // 表情包
│           └── icon                      // 字体图标
│           └── img                       // 图片资源
│           └── mp3                       // 消息提示音频
│       └── class                         // 类文件
│       └── components                    // 组件
│           └── ChatContent.vue           // 聊天窗口
│           └── ChatDomain.vue            // 功能组件
│           └── ChatEditor.vue            // 聊天输入框
│           └── ChatFoot.vue              // 聊天框底部
│           └── ChatHead.vue              // 聊天头部
│           └── ChatNav.vue               // 菜单栏
│           └── HasChat.vue               // 聊天入口
│       └── enums                         // 通用枚举
│       └── json                          // JSON数据处理
│       └── router                        // 路由
│       └── store                         // 数据仓库
│       └── utils