基于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 相关文章推荐
jquery控制listbox中项的移动并排序
Nov 12 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 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
php 动态多文件上传
2009/01/18 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
js的event详解。
2006/09/06 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
python转换摩斯密码示例
2014/02/16 Python
Python urlopen()函数 示例分享
2014/06/12 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python数据类型学习笔记
2016/01/13 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
Python向excel中写入数据的方法
2019/05/05 Python
解决yum对python依赖版本问题
2019/07/05 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
深入理解Python 多线程
2020/06/16 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
销售人员个人求职信
2013/09/26 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS