手把手教你打造一个完备的 web 聊天室-兼容 pc 移动端

genal

阿童木聊天室

在线地址www.genal.fun

项目简介

? 闲暇时间想做一个聊天室来巩固前端技能,于是在 2020 年 6 月 24 号就开始了阿童木聊天室的开发之旅
? 项目采用全 typescript 开发,这是为了以后的功能迭代打基础。当然,我本身也是很喜欢 typescript 的
? 目前聊天室已经具备完整的聊天功能,今后会陆续开发更多酷炫的功能,喜欢的朋友给个 star 鼓励一下我吧

项目界面

手把手教你打造一个完备的 web 聊天室-兼容 pc 移动端插图

功能介绍

  • 群聊 /私聊
  • 创建群 /加入群聊 /模糊搜索群
  • 添加好友 /模糊搜索好友
  • 图片上传 /粘贴发送图片 /图片预览
  • 更改用户名 /头像上传
  • 表情包
  • 消息分页
  • 移动端兼容

技术概览

  • Typescript:JavaScript 的一个超集,它最大的优势是提供了类型系统和提高了代码的可读性和可维护性。
  • Vue2.6.x:前端渐进式框架。
  • Socket/io:实现实时通信,websocket 第三方库。
  • Vuex:专为 Vue.js 应用程序开发的状态管理模式。
  • Nestjs:是一个用于构建高效、可扩展的 Node.js 服务端应用框架,基于 TypeScript 编写并且结合了 OOP1 、FP2 、FRP3 的相关理念。
  • Typeorm: 支持最新的 JavaScript 特性并提供额外的特性以帮助你开发任何使用数据库的应用程序。
  • ES6+:采用 ES6+语法,箭头函数、async/await 等等语法很好用。
  • SASS(SCSS):用 SCSS 做 CSS 预处理语言,可以使用最高效的方式,以少量的代码创建复杂的设计。

数据库表结构设计

手把手教你打造一个完备的 web 聊天室-兼容 pc 移动端插图(1)

环境配置

  • 数据库 mysql 以及 chat 数据库
  • node v10.16.3

运行项目

前端项目

cd genal-chat-client 
npm run serve

后端项目

cd genal-chat-server
npm run start:dev

作者

github: edison

ZiLong:很有美感

python30:不错不错

web 开发可不可以像集装箱一样组装起来?

milu2003516968:最近想做一款产品,搭建官网,然后我感觉有很多重复性的工作。比如我希望为网站增加一个问答系统,又比如我希望为网站增加一个文章系统,又比如我要开发网站的账号系统,注册+登录+手机验证+邮箱发送验证+找回密码等等。搭建完之后,我还要搭建产品的文档和帮助中心等等。其实这些东西,你做下一款产品的时候,这种工作依然是重复的。我也在想,这世界…

把 Python web 当 PHP web 写

abersheeran:https://github.com/Aber-s-practice/fake-php 随手建了一个项目玩玩,仅供娱乐。如果你喜欢 .py 的后缀,把 .php 改成 .py 就行了。 哈哈哈,有时候这种设计之外的用法还是蛮有意思的。

写了一个 Web 端的网易云音乐的同步听歌

Dounx:算是一个玩具应用,主要练手了下最近学的东西,没什么技术含量(Demo: https://music.dounx.me (用 yJkFxBajNCHPU5GfakJxc675 可以加入我的房间)项目地址: https://github.com/Dounx/live-music网易云账号登陆的时候,数据不会保存在服务器端,只是通过 https 在服务…

如何让 Web 服务器少消化一些垃圾数据?

Wizards:用 netcat 执行了如下一行命令:向某个弹幕网站的服务器端口写空字符。 dd if=/dev/zero bs=10MB count=1 | nc -n -N 120.92.174.135 80 大厂服务器可能是速战速决,直接返回了 EOF,没有标准 HTTP 响应。 对于我自己的服务器,执行相同的指令。Nginx 傻傻地接受了 10MB …

Python 工程师应该如何学习 Java web

Rxianbei:python 工程师,后端和测试都写过。 已经掌握 java 基本语法,常用数据结构( map,数组等。高级特性如反射没涉及)应该以什么样的学习路径学习 java web 开发 目标是能唬住面试官,找到 java 开发的工作。 直接上 springboot 能成么sampeng:你要这样就能忽悠住面试官,这种公司去了又如何… Rxianbe…