用Vue3+Vite+Typescript及全家桶最近版本搭建一个多人在线聊天室

最新推荐文章于 2024-06-04 08:42:13 发布
最新推荐文章于 2024-06-04 08:42:13 发布
阅读量620 收藏 1
点赞数
文章标签： vue.js typescript node.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41557320/article/details/118496105
版权

先整个在线体验链接，瞅瞅效果：

芒果皮儿聊天室在线Demo

一直想体验一下Vue3及周边技术栈的最新版本，于是最近几天忙活了一下，整了个在线聊天室的Demo版本吧，使用Vite搭建的，模板采用的vue-ts，整合了vuex，vue-router，ant-design-vue，axios的最新版本，感觉还挺爽，也踩了一些坑，但是对于大佬们来说必然不算啥，所以完全是小白的姿势尝鲜新技术，算是练练手吧。

服务端这边使用的是被称为Node版Spring的NestJs，用起来个人感觉还是很nice的，刚接触还在学习中，整合了JWT身份验证、日志系统、数据库操作等（代码最初也是参考大佬的教程做的），实现了登录注册及SocketIO收发消息。

话不多说先放几张效果图：

e5b42f6534250522b5e5428d2a72c30.png

还有一个平平无奇毫无美感的登录页，作为前端的耻辱（狗头）：

429c02066c116b016f9c99c2a0fa680.png

整体代码比较简单，GitHub地址为 聊天室前端代码Vue3+Vite+Typescript，求星星

服务端代码也在我的GitHub上

目前刚开始做，只完成了登录注册及收发消息，还在不断完善更新，欢迎交流或者一起练手完善

向前看傻帽儿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
原生JS实现一个WebSocket聊天室!
Blog沙漏在下雨
07-03 870
http协议只能实现单向通信， 如果要实现聊天平台的话， 那么可以使用轮询的方式， 不断的向服务器发送请求， 来确定是否还存在信息流， 全双工的 socket协议 可以解决这个问题， 那么应用到web端的 WebSocket 是如何实现一个简单的聊天室呢，记录下
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
vue-websocket：Vue.js的简单websocket（socket.io）插件
02-06
Vue网络套接字 Vue.js的插件。 该软件包不支持本地websockets 。 当时，我们建议使用或。 有关此问题的持续讨论，请访问 。 安装 您可以使用npm安装此软件包，也可以通过下载主插件文件进行手动安装。 npm $ npm install -S vue-websocket 手册 下载生产文件。 该链接是在该项目的dist目录中找到的同一文件的镜像。 用法 注册插件。 默认情况下，它将连接到/ ： import VueWebsocket from "vue-websocket" ; Vue . use ( VueWebsocket ) ; 或连接到另一个地址： Vue
使用vue3和ts和elementplus搭建的简单聊天的页面
L1511768722的博客
09-26 2291
简单的网页聊天页面
Vue3 + Vite + TypeScript 项目搭建总结
最新发布
油墨香^-^的博客
06-04 51
最后就可以在页面使用 element 组件啦~至此一个完整的 vue3+vite+ts 项目就搭建完成了，还有待完善，包括 vite 配置还有很多优化的地方，易用性组件等，等下期一起整理哦。node 版本>=12.0.0，这边建议直接更新到 16+（我本地的是最新的 v20.11.1）文件，复制以下代码，测试一下路由跳转。,版本错误的话无法使用路由进行跳转。此时可以在 src 目录下新建一个。路由配置成功，页面跳转成功。：在.vue 文件增加。：vue3 最好安装。
基于Vite + Vue3 + Typescript 实现在线聊天项目
weixin_44599011的博客
08-13 1027
本项目是本人的毕业设计，在校的时候看着同学都都开始一步一步的开始准备毕设了，刚好那段时间正在了解websocket，于是有了个想法，毕设能不能做一个在线聊天的系统。前端技术用到了Vue3+Typescript+pinia。...
WebSocket——vue3简易聊天室
SilentLand的博客
06-15 2135
WebSocket——vue3版实现
vue3 + vite5 + typescript + element-plus 构建的后台管理前端模板的 vue3 版本
04-02
综上所述，这个项目结合了 Vue3、Vite5、TypeScript 和 Element-Plus 的优点，提供了一个现代化的后台管理前端模板，适合开发高效、稳定、具有良好用户体验的管理系统。通过学习和使用这个模板，开发者可以深入理解 ...
Vue3+Vite+TypeScript+Ant Design Vue+Pinia等主流技术的后台管理系统项目.zip
01-03
Vue3+Vite+TypeScript+Ant Design Vue+Pinia是一个现代前端开发的组合，用于构建高效、可维护的后台管理系统。这个项目充分利用了这些技术的优势，提供了丰富的功能和优化的开发体验。以下是对这些技术及其在后台...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue移动端实现聊天功能
w15635748705的博客
10-22 4413
这个没有什么技术含量props: {add: {},back: {},title: {default: "登陆",},search: {},},// 跳转到搜索页面},// 跳转到搜索页面},// 返回事件函数},},
Vue3+Vite+TS后台项目 ~ 6.用户登录校验
yuan
12-24 3928
一、登录 1. 登录静态页 编辑 src / views / login / index.vue 文件 <template> <div class="login-container"> <el-form class="login-form" :rules="rules" ref="form" :model="user" size="medium" @submit.prevent="handl..
腾讯TIM实现即时通信 v3+ts实践
每天都要努力学习哦~~
02-27 2117
引入pinia的聊天模块开始进行sdk初始化在登录完成后 完成tim的登录 并且持久化登录在顶层页面完成消息的接收，也就是监听消息的变化每次变化通知一下pina事件的分法在页面收到action发过来的消息后，要把消息主动放在当前聊天记录里面当选择一个新的联系人的时候要获取这个人的聊天信息每次发送消息要注意清空输入框，并且把最新消息手动push到当前聊天数组中SDKAppID,// 接入时需要将0替换为您的即时通信 IM 应用的 SDKAppID。
用Socket.io在（vue3+ts）项目中实现聊天功能
qq_52683382的博客
08-15 1425
Socket.io 实现聊天功能
vue websocket的使用_Nest.js + Vue + TS 打造一个酷炫的星空聊天室(含完整数据库设计)...
weixin_39764379的博客
12-04 604
作者 |edisonChttps://juejin.im/post/6854573222415826957?闲暇时间想做一个聊天室复盘一下这些年学习到的技术，于是在2020年6月24号就开始了 Genal 聊天室的开发之旅。? 项目采用全 typescript 开发，这是为了以后的功能迭代打基础。当然，我本身也是很喜欢 typescript 的。项目界面功能介绍更改用户名/头像上...
node+vue3+websocket实现简易的聊天功能
badoldboy的博客
06-28 1305
由于 express-ws 在默认不添加server 参数情况下，使用的是app.listen 创建的httpserver,而express 脚手架将 app和server初始化分离了，所以需要再次配置express-ws。2.每个用户都有一个conn 那把conn存入到数组里方便以后广播所接受到的消息，去传达到其他用户。在routes文件下新建一个ws.js文件。4.接收到前端传来设置的用户名。在app.js文件注册路由。类似一个实时评论回复的效果。3.对用户数量做一个统计。
vue3简易对话窗口
weixin_43073383的博客
05-05 1252
【代码】vue3简易对话窗口。
十分钟利用环信WebIM-vue3-Demo，打包上线一个即时通讯项目【含音视频通话】
huan132456765的博客
02-09 1543
这篇文章无废话，只教你如果接到即时通讯功能需求，十分钟利用环信WebIM-vue3-Demo，打包上线一个即时通讯项目【包含音视频通话功能】
vue3+vite3+typescript使用wangEditor编辑器
05-17
可以使用以下步骤在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器： 1. 安装 WangEditor。可以使用 npm 或 yarn 安装。 ```bash npm install wangeditor --save # 或者 yarn add wangeditor ``` 2. 在 `main.ts` 中引入 WangEditor 和 CSS 文件。 ```typescript import WangEditor from 'wangeditor'; import 'wangeditor/release/wangEditor.css'; const app = createApp(App); app.config.globalProperties.$WangEditor = WangEditor; // 挂载编辑器到全局 app.mount('#app'); ``` 3. 在组件中使用 WangEditor。 ```vue <template> <div class="editor-wrapper"> <div ref="editorRef"></div> </div> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue'; export default defineComponent({ name: 'Editor', setup() { const editorRef = ref<HTMLDivElement>(); onMounted(() => { const editor = new (window as any).$WangEditor(editorRef.value); editor.create(); }); return { editorRef, }; }, }); </script> <style lang="scss"> .editor-wrapper { height: 400px; .w-e-text-container { height: 100%; } } </style> ``` 在 `onMounted` 钩子函数中，使用 `new (window as any).$WangEditor` 来创建编辑器实例，并传入编辑器容器的 DOM 节点。调用 `editor.create()` 方法来创建编辑器。 注意：由于 WangEditor 的类型定义文件并不完善，因此可以在 `tsconfig.json` 中添加以下配置来避免类型检查报错。 ```json { "compilerOptions": { "skipLibCheck": true } } ``` 这样，就可以在 Vue3 + Vite3 + Typescript 中使用 WangEditor 编辑器了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值