基于Vite + Vue3 + Typescript 实现在线聊天项目

前言

本项目是本人的毕业设计，在校的时候看着同学都都开始一步一步的开始准备毕设了，刚好那段时间正在了解websocket，于是有了个想法，毕设能不能做一个在线聊天的系统。
前端技术用到了 Vue3 + Typescript + pinia 。

WebSocket

网页版的在线聊天一般分为两种方式，轮询和全双工。以传统的HTTP形式来做，Server没办法主动的向Client发送消息，而像WebSocket这种全双工形式则不太一样，二者保持长连接，并且能让Server主动的推送消息到Client，这就大大节省了请求资源。

目标功能

登录
注册
国际化
单聊功能
群聊功能
发送表情、文件、图片、视频、好友名片、聊天记录、消息引用
好友关系管理、黑名单
个人信息管理以及头像上传
置顶聊天、免打扰、已读消息
添加好友、添加群聊以及创建群聊
掉线重连

项目截图

1. 登录注册

2.聊天窗口

3.我的好友及我的群组

项目构建

# install dependencies
npm install # serve with hot reload at localhost:3000
npm run dev # build for production with minification
npm run build # Lint with EsLintnpm run lint

项目地址

https://github.com/huaungwj/openIM-Web

在线运行

https://live.weikill.club

基于Vite + Vue3 + Typescript 实现在线聊天项目相关推荐

如何开发一款基于 Vite+Vue3 的在线Excel表格系统（上）
今天,葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统. 在正式开始项目介绍之前,首先咱们首先来介绍一下Vite和Vue3. Vue3 2020年09月18日Vue.js 3.0发布, ...
基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 — Soybean Admin开源啦
???基于Vite + Vue3 + NaiveUI + TypeScript的中后台管理模版 - Soybean Admin开源啦??? 简介 Soybean Admin 是一个基于 Vue3.Vi ...
Vite+Vue3+TypeScript
2021年最新最完整Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2. ...
Vite+Vue3+TypeScript基础知识案例
Vite+Vue3+TypeScript基础知识案例<一> 1.学习背景随着前端web应用的需求不断发展和变化,vue生态圈也紧跟开发者步伐,不断演化.尽管vue2.0已经很完善了,很多 ...
java在线聊天项目ppt_基于JavaEE的在线聊天聊天.ppt
基于JavaEE的在线聊天聊天.ppt 聊城大学论文答辩,指导教师,学生姓名,年月,基于JavaEE的在线聊天聊天系统的设计与实现,论文提纲,,选题背景.研究内容,1,JavaEE技术介绍,主要创 ...
基于最新 Vite+Vue3+VantUI移动端应用项目搭建
Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个基于原生 ES-Module 的前端构建工具.其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口,并表示自己 ...
Vue3+TypeScript+Router+Vuex+Ant-Design-Vue项目（三）—— 使用 vite 搭建项目
vite 概念什么是vite?-- 是vue 极力推荐的新一代前端构建工具. 优势开发环境中,无需打包操作,可快速的冷启动众所周知,用vue-cli创建的vue项目或者其他基于webpack构 ...
基于Server-Sent Event的简单在线聊天室
一.Web即时通信所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
基于Java语言的Web在线聊天室
在线聊天室能够实现登录,注册,聊天功能,最终效果如下图所示注册页面 <%@ page language="java" contentType="text/htm ...