基于vue和websocket的多人在线聊天室


Posted in Javascript onFebruary 01, 2020

最近看到一些关于websocket的东西,就决定写一个在线聊天室尝试一下。最终决定配合vue来写,采用了官方的vue脚手架vue-cli和官方的router,在本例中呢,我是用了CHAT这个对象来存储app的数据的,但后来一想,虽然项目很小,但如果用官方的vuex会更好,方便以后扩展,比如可以加上私信功能,可以在对方不在线的时候缓存发送的消息,这些都是可以的。(现在比较尴尬的就是,我把聊天室写好放到公众号号redream里,但是很少有人会同时在线,所以你会经常发现你进去的时候只有你一个人,就导致群聊不起来)

1.好吧,先来看一下我们的效果图

基于vue和websocket的多人在线聊天室

基于vue和websocket的多人在线聊天室

基于vue和websocket的多人在线聊天室

2.用到的一些东西

nodejs node服务器运行环境
express 搭建node服务器
websocket 本例核心,推送服务器消息到所有人
socketio websocket第三方库
vue + router 视图层双向数据绑定框架,用来简化开发、组件化开发的
es6语法 就是好用简洁哈哈
https 因为像websocket和很多h5的新功能,浏览器为了安全起见都仅支持https下开发 关于nodejs搭建express服务器可以看这里我就是在这里学的,代码里也借鉴了很多,关于搭建https服务器就不简介了,内容太多,推荐阿里云一年的免费证书,可以访问我的站点查看

3.代码架构简介

server里是需要运行在node服务器上的js文件,监听websocket连接
src/api/client是客户端连接服务器的核心js
src/components下是页面的组件。我分成了三大部分,login组件(登录页面),chat组件(聊天页面),groupinfo组件(群信息页面),其实是单页应用,反应速度更快,接近原生app,只不过用router联系在了一起。像chat组件,又又head、body、foot组件组成,组件化是很好的习惯和架构方式,条理清晰,而且在大项目里很多可以复用。 具体都在代码了,大家可以下载下来在本地跑一跑。

4.运行代码

install dependencies

npm install

serve with hot reload at localhost:8080
npm run dev

build for production with minification
npm run build

这是在我站点上跑着的例子,大家可以看一看,在手机上效果更加,最近校招比较忙,就花了两天,没考虑兼容,欢迎大家提出意见。

官方网址:https://github.com/secreter/websocket_chat

文件打包下载:vue_websocket_chat.zip

Javascript 相关文章推荐
Javascript引用指针使用介绍
Nov 07 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
微信小程序实现watch监听
Jun 04 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
node crawler如何添加promise支持
Feb 01 #Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 #Javascript
js获取本日、本周、本月的时间代码
Feb 01 #Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 #Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 #Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 #Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 #Javascript
You might like
PHP5 面向对象程序设计
2008/02/13 PHP
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
简单了解Python中的几种函数
2017/11/03 Python
python列表的增删改查实例代码
2018/01/30 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python用什么编辑器进行项目开发
2020/06/17 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
清洁工岗位职责
2014/01/29 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
文明礼仪标语
2014/06/13 职场文书
大学生求职信例文
2014/06/29 职场文书
2014年医院工作总结
2014/11/20 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL