Sala de bate-papo Astro Boy
nuvem de código
Endereço online www.genal.fun (Inválido e não está mais planejado para ser implantado)
Se você tiver alguma sugestão, vá para a área de problemas
Introdução do projeto
?No meu tempo livre, queria fazer uma sala de chat para consolidar habilidades de front-end, então iniciei a jornada de desenvolvimento da sala de chat Astro Boy em 24 de junho de 2020.
? O projeto é desenvolvido usando texto datilografado completo, que estabelece a base para futuras iterações funcionais. Claro, também gosto muito de texto datilografado.
? Atualmente, a sala de chat já possui funções de chat completas. Mais recursos interessantes serão desenvolvidos no futuro A iteração foi interrompida agora! Amigos interessados podem fazer o fork e desenvolvê-lo sozinhos, e você pode modificá-lo como quiser! Atualizarei novos recursos quando tiver tempo!
Interface do projeto
Versão para PC
Terminal móvel
Introdução à função
- Compatível com dispositivos móveis
- Modificação das informações do usuário (avatar/nome de usuário/senha)
- Bate-papo em grupo/bate-papo privado
- Criar grupo/entrar no grupo/sair do grupo/grupo de pesquisa difusa
- Adicionar amigos/excluir amigos/usuários de pesquisa difusa
- Paginação de mensagens
- Emoticons
- Envio de imagem/visualização de imagem
- Estatísticas de pessoas on-line
- Tema personalizado
- Lembrete de reconectar
Visão geral da tecnologia
- Typescript : um superconjunto de JavaScript. Sua maior vantagem é que ele fornece um sistema de tipos e melhora a legibilidade e a manutenção do código.
- Vue2.6.x : Estrutura progressiva de front-end.
- Socket/io : comunicação em tempo real, biblioteca de terceiros do websocket.
- Vuex : Um padrão de gerenciamento de estado desenvolvido especificamente para aplicações Vue.js.
- Nestjs : é uma estrutura para construir aplicativos Node.js eficientes e escalonáveis do lado do servidor. É escrito com base em TypeScript e combina os conceitos relacionados de OOP1, FP2 e FRP3.
- Typeorm : oferece suporte aos recursos JavaScript mais recentes e fornece recursos adicionais para ajudá-lo a desenvolver qualquer aplicativo que use um banco de dados.
- ES6+ : Usando a sintaxe ES6+, funções de seta, async/await e outras sintaxes são muito fáceis de usar.
- SASS (SCSS) : Usando SCSS como linguagem de pré-processamento CSS, você pode usar a maneira mais eficiente de criar designs complexos com uma pequena quantidade de código.
Projeto de estrutura de tabela de banco de dados
Configuração do ambiente
- Banco de dados mysql e banco de dados chat (observe que o formato do banco de dados é utf8mb4)
- nó v10.16.3
Execute o projeto
- Projeto front-end
cd genal - chat - client
npm i
npm run serve
configuração do mysql Se o mysql não puder se conectar e um erro for relatado: ER_NOT_SUPPORTED_AUTH_MODE, isso é causado pela incompatibilidade da versão do mysql. Consulte este artigo https://blog.csdn.net/qq_41831345/article/details/83150502.
Não há script SQL no banco de dados. Basta alterar a senha do banco de dados no back-end app.module.ts e criar um novo banco de dados chat .
Projeto de back-end
cd genal - chat - server
npm i
npm run start: dev
Registro de iteração do sistema
Clique para ver
v1.0.0
Função
- Adicionar novo usuário
- Adicionar novo grupo
- bate-papo em grupo
Interface v1.0.0
v2.0.0
Função
- Bate-papo em grupo/bate-papo privado
- Crie um grupo/participe de um bate-papo em grupo/grupo de pesquisa difusa
- Adicionar amigos/pesquisa difusa de amigos
- Alterar nome de usuário/upload de avatar
- Emoticons
- Paginação de mensagens
Interface v2.0.0
v3.0.0
Função
- Bate-papo em grupo/bate-papo privado
- Crie um grupo/participe de um bate-papo em grupo/grupo de pesquisa difusa
- Adicionar amigos/pesquisa difusa de amigos
- Carregar/colar imagem enviar imagem/visualização de imagem
- Alterar nome de usuário/upload de avatar
- Emoticons
- Paginação de mensagens
interface v3.0.0
Igual à v2.0.0
v4.0.0
Função
- Bate-papo em grupo/bate-papo privado
- Crie um grupo/participe de um bate-papo em grupo/grupo de pesquisa difusa
- Adicionar amigos/pesquisa difusa de amigos
- Carregar/colar imagem enviar imagem/visualização de imagem
- Alterar nome de usuário/upload de avatar
- Emoticons
- Paginação de mensagens
- Compatível com dispositivos móveis
Interface v4.0.0
Igual à v2.0.0
v5.0.0
Função
- Bate-papo em grupo/bate-papo privado
- Criar grupo/entrar em bate-papo em grupo/sair do grupo/grupo de pesquisa difusa
- Adicionar amigos/excluir amigos/pesquisa difusa de amigos
- Carregar/colar imagem enviar imagem/visualização de imagem
- Alterar nome de usuário/upload de avatar
- Emoticons
- Paginação de mensagens
- Compatível com dispositivos móveis
- Estatísticas de pessoas on-line
- Lembrete de reconectar
interface v5.0.0
v6.0.0
Função
- Compatível com dispositivos móveis
- Modificação das informações do usuário (avatar/nome de usuário/senha)
- Bate-papo em grupo/bate-papo privado
- Criar grupo/entrar no grupo/sair do grupo/grupo de pesquisa difusa
- Adicionar amigos/excluir amigos/usuários de pesquisa difusa
- Paginação de mensagens
- Emoticons
- Envio de imagem/visualização de imagem
- Estatísticas de pessoas on-line
- Tema personalizado
- Lembrete de reconectar
interface v6.0.0
autor
GitHub: Edison
Lista de colaboradores
mtnbgx, BoBoooooo, Nyaasu66, BeanCookie (sem ordem específica)
Como implantar
Instruções de implantação da sala de bate-papo Astro Boy
mais detalhes
Use TypeScript para criar uma sala de chat poderosa na web
