Vue全家桶+Socket.io+Koa2打造一个智能聊天室 接口已开放

Vue.js+Socket.io+Koa2打造一个智能聊天室

Vue.js全家桶+Socket.io+Express/Koa2 打造的一个智能聊天室。
已经开源啦!为了方便大家学习,智能机器人、IP定位接口也开放了!接口请在源码中查看?

   QQ群里面的智能机器人很火,于是用Vue.js+Socket.io+Koa2打造了一个智能聊天室,实现了IP定位、在线群聊,加入了Emoji表情?,以及接入了智能机器人?

前言

话说最近前端技术圈也有派系之争了,是好事还是坏事?萝卜青菜各有所爱,本项目采用的是Vue.js做前端页面展示,大家完全可以换成自己别的喜欢的,React、Angular等等,每个框架都有可取的地方,这里不多说?下面扯到正题上?

预览

在线预览地址:? https://microzz.com/vue-chat/

Vue.js+Socket.io 智能聊天室 microzz.com

Vue.js+Socket.io 智能聊天室 microzz.com

源代码

现在已经开源: ?https://github.com/microzz/vu...
欢迎star和提出宝贵意见?

技术栈

  • Vue2.0:前端页面展示。

  • Socket.io:实现实时通信

  • Vuex:Vuex,实现不同组件间的状态共享

  • vue-router:页面路由切换

  • axios:一个基于 Promise 的 HTTP 库,向后端发起请求。

  • ExpressKoa2:因为vue-cli生成的项目是基于express的,所以在开发阶段我使用的是它,但是真正上线生产环境我换成了Koa2

  • Moment.js:一个时间处理的库,方便对时间进行格式化成需要的格式。

  • ES6ES7:采用ES6语法,这是以后的趋势。箭头函数、Promise等等语法很好用。

  • localStorage:保存用户信息以及聊天记录。

  • Webpack:vue-cli自带Webpack,但是需要自己改造一下,比如要对需要安装sass相关loader,vue-cli已经配置好了webpack,你只需要安装依赖就可以,使用的时候只需要<style lang="scss"></style>

  • SASS(SCSS):用SCSS做CSS预处理语言,有些地方很方便,个人很喜欢用。(详看?SASS用法指南)

  • flex:flex弹性布局,简单适配手机、PC端。

  • CSS3:CSS3过渡动画及样式。

分析

Socket.io

通过Express/Koa在服务端可以这样做:

// Server (app.js)

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

客户端代码

// Client (index.html)

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

不管是服务器还是客户端都有 emiton 这两个函数,可以说 socket.io 的核心就是这两个函数了,通过 emiton 可以轻松地实现服务器与客户端之间的双向通信。

emit :用来发射一个事件或者说触发一个事件,第一个参数为事件名,第二个参数为要发送的数据,第三个参数为回调函数(一般省略,如需对方接受到信息后立即得到确认时,则需要用到回调函数)。
on :用来监听一个 emit 发射的事件,第一个参数为要监听的事件名,第二个参数为一个匿名函数用来接收对方发来的数据,该匿名函数的第一个参数为接收的数据,若有第二个参数,则为要返回的函数。
socket.io 提供了三种默认的事件(客户端和服务器都有):connectmessagedisconnect 。当与对方建立连接后自动触发 connect 事件,当收到对方发来的数据后触发 message 事件(通常为 socket.send() 触发),当对方关闭连接后触发 disconnect 事件。

此外,socket.io 还支持自定义事件,毕竟以上三种事件应用范围有限,正是通过这些自定义的事件才实现了丰富多彩的通信。

最后,需要注意的是,在服务器端区分以下三种情况:

socket.emit() :向建立该连接的客户端广播
socket.broadcast.emit() :向除去建立该连接的客户端的所有客户端广播
io.sockets.emit() :向所有客户端广播,等同于上面两个的和

Vue.js

在Vue的方面就比较常规了,Vue全家桶:Vue2.0+Vuex+axios+vue-router,我GitHub的有几个开源项目可以参考?https://github.com/microzz

总结

  1. 组件状态多了用Vuex管理很方便,引用 Redux 的作者 Dan Abramov 的话说就是:

Flux 架构就像眼镜:您自会知道什么时候需要它。

  1. 事先一定要先想好整个页面组成,怎样去分组件开发,这样在开发阶段会事半功倍。

  2. Moment.js在Vue中用ES6的方式引入会有问题,可以尝试在main.js尝试这样import moment from 'moment' Vue.prototype.moment = moment;给Vue的原型上添加moment,这样就可以在Vue的实例中随意使用它了。

  3. get方式通过URL传参最好使用encodeURI对参数进行编码

  4. 一定要处理好那些异步操作,否则会带来各种问题。开发阶段使用的是Promise,上线时候使用了ES7的Async+Promise的组合,让异步操作更加合理。

About

关于我:?https://microzz.com/about/

GitHub:? https://github.com/microzz

E-mail: ? zhaohui@microzz.com

个人网站: ?https://microzz.com/


前端开发
前端开发

[链接]

334 声望
148 粉丝
0 条评论
推荐阅读
Redis命令大全
title: Redis命令大全date: 2017-05-20 20:47:52tags: Redis 数据库 命令 Redis命令大全 Redis介绍     Redis是一个key-value存储系统。和Memcached类似,它支持存储的value类型相对更多,包括string(字符串)、li...

microzz1阅读 2.8k

Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 13.3k评论 7

给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
vue中style scope深度访问新方式(:deep())
1、&gt;&gt;&gt;如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析&gt;&gt;&gt;,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.4k评论 3

你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图

[链接]

334 声望
148 粉丝
宣传栏