基于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 相关文章推荐
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
简单实现js倒计时功能
Feb 13 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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
文件上传类
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
浅谈node模块与npm包管理工具
2018/01/03 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
Python返回真假值(True or False)小技巧
2015/04/10 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python 递归深度优先搜索与广度优先搜索算法模拟实现
2018/10/22 Python
Python如何使用函数做字典的值
2019/11/30 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
家庭贫困证明书(3篇)
2014/09/15 职场文书
2014年减负工作总结
2014/12/10 职场文书
公司行政管理制度范本
2015/08/05 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python