microzz / vue-chat Goto Github PK

View Code? Open in Web Editor NEW

973.0 43.0 250.0 208 KB

👥Vue全家桶+Socket.io+Express/Koa2打造一个智能聊天室。

Home Page: https://microzz.com/vue-chat/

JavaScript 37.82% HTML 2.22% Vue 55.24% CSS 4.72%

vue socketio vuex vue-router scss vuejs vue2 vuejs2 vuex2 express

vue-chat's Introduction

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/

源代码

现在已经开源： 👉https://github.com/microzz/vue-chat 欢迎star和提出宝贵意见😄

技术栈

Vue2.0：前端页面展示。
Socket.io：实现实时通信
Vuex：Vuex，实现不同组件间的状态共享
vue-router：页面路由切换
axios：一个基于 Promise 的 HTTP 库，向后端发起请求。
Express、Koa2：因为vue-cli生成的项目是基于express的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了Koa2。
Moment.js：一个时间处理的库，方便对时间进行格式化成需要的格式。
ES6、ES7：采用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>

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

emit ：用来发射一个事件或者说触发一个事件，第一个参数为事件名，第二个参数为要发送的数据，第三个参数为回调函数（一般省略，如需对方接受到信息后立即得到确认时，则需要用到回调函数）。 on ：用来监听一个 emit 发射的事件，第一个参数为要监听的事件名，第二个参数为一个匿名函数用来接收对方发来的数据，该匿名函数的第一个参数为接收的数据，若有第二个参数，则为要返回的函数。 socket.io 提供了三种默认的事件（客户端和服务器都有）：connect 、message 、disconnect 。当与对方建立连接后自动触发 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

总结

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

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

事先一定要先想好整个页面组成，怎样去分组件开发，这样在开发阶段会事半功倍。
Moment.js在Vue中用ES6的方式引入会有问题，可以尝试在main.js尝试这样import moment from 'moment' Vue.prototype.moment = moment;给Vue的原型上添加moment，这样就可以在Vue的实例中随意使用它了。
get方式通过URL传参最好使用encodeURI对参数进行编码
一定要处理好那些异步操作，否则会带来各种问题。开发阶段使用的是Promise，上线时候使用了ES7的Async+Promise的组合，让异步操作更加合理。

About

关于我：👉https://microzz.com/about/

GitHub：👉 https://github.com/microzz

E-mail: 👉 [email protected]

vue-chat's People

Contributors

Stargazers

Watchers

Forkers

qwdingyu hotao ithack hewenhao2008 lancer2 jijmin getive zx7970820 avolons truexu0529 mayude hukaibaihu fewiki yoyolui lifeipt cipuzp sahalawzh linkyfish chenyuan8059 mykite monster1935 umbrellazwl fen666 tywo45 mgsers tingyinhelen igit-cn rochzp zlzxfcc imjerrybao jmptrader hdfs010 qijiebing bensonwu97 mokq2016 yoler windbamboo reyboo duke-lv hms181231 qiank128 aiyes jzxyouok weijiehuang zhanghaitian libin1991 clound goeccn zengnaxianlin gufeng0719 huangcongqing charliemacs laozhangjia 1nnovator zs2388211949 shudianzhang huanduo chtbof cderfdsa geekcarl mmaohuijun gaodevops wjl198435 mydoors ghsa-io winer110 miloshu coco-wan linecode mcjeremy holmes-zf z417915015 woniu3821 gihubtest wojiaohanshuai cuitymiko huangtao00 jiaoph hhardyy lesnicaaa rzxbest foreverelement 294650171 diansaner mnzone gogoong matisha001 cosmosdawn redgang dmaker1993 sleepcatt ausergee linxiaobing1005032863 yoyo-lee zhuomingliang xiaohuidong99 colinrds fishzzj beads123 xuanyanghou

vue-chat's Issues

后端的代码可以开源吗

智能机器人那块的接口，你后端也是调用别人的吗

本地npm start 之后显示localhost拒绝访问

node 版本6.9.5
npm 版本3.10.10

原来，后端不开源，秀啊。。。

你好，'https://zhaoplus.com/api/ip' 这个接口可以正常使用吗？接口连接不上

build之后，程序无法正常访问

POST http://localhost/socket.io/?EIO=3&transport=polling&t=LmQuiI4 404 (Not Found)

建议

大神，入坑vue，就是学习你的项目提升的。很感谢

建议，下次有个小的项目针对多页入口的

你好，这些表情是从哪里找的？怎么可以其他表情！

服务器挂了

服务器挂了吧，socket的接口无法连击

运行不了

为什么用npm run dev 运行时白页呢，所有的包也都安装了啊

新手问下安装的事情

是先下载文件在项目内安装npm install 然后会自动安装所依赖的文件吗？

貌似本地不能运行了

window 本地之行顺序如下：
npm install => npm run dev
报错：

Starting dev server...
ERROR Failed to compile with 5 errors10:04:28

error in ./src/App.vue

Module build failed: Error: %1 is not a valid Win32 application.
\?\E:\前端测试dome\vue-chat\node_modules\node-sass\vendor\win32-x64-48\binding.node
at Error (native)
at Object.Module._extensions..node (module.js:597:18)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at module.exports (E:\前端测试dome\vue-chat\node_modules\node-sass\lib\binding.js:19:10)
at Object. (E:\前端测试dome\vue-chat\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

@ ./~~/vue-style-loader!./~~/css-loader?{"minimize":false,"sourceMap":false}!./~~/vue-loader/lib/style-compiler?{"id":"data-v-2a75fd14","scoped":false,"hasInlineConfig":false}!./~~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-367 13:3-17:5 14:22-375
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Login/Login.vue

@ ./~~/vue-style-loader!./~~/css-loader?{"minimize":false,"sourceMap":false}!./~~/vue-loader/lib/style-compiler?{"id":"data-v-31773447","scoped":true,"hasInlineConfig":false}!./~~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Login/Login.vue 4:14-392 13:3-17:5 14:22-400
@ ./src/components/Login/Login.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Chatting/Chatting.vue

@ ./~~/vue-style-loader!./~~/css-loader?{"minimize":false,"sourceMap":false}!./~~/vue-loader/lib/style-compiler?{"id":"data-v-05b45833","scoped":true,"hasInlineConfig":false}!./~~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Chatting/Chatting.vue 4:14-395 13:3-17:5 14:22-403
@ ./src/components/Chatting/Chatting.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/Chatting/AI.vue

@ ./~~/vue-style-loader!./~~/css-loader?{"minimize":false,"sourceMap":false}!./~~/vue-loader/lib/style-compiler?{"id":"data-v-08a4dcb5","scoped":true,"hasInlineConfig":false}!./~~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Chatting/AI.vue 4:14-389 13:3-17:5 14:22-397
@ ./src/components/Chatting/AI.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

error in ./src/components/About/About.vue

@ ./~~/vue-style-loader!./~~/css-loader?{"minimize":false,"sourceMap":false}!./~~/vue-loader/lib/style-compiler?{"id":"data-v-412f0d8f","scoped":true,"hasInlineConfig":false}!./~~/sass-loader/lib/loader.js?{"sourceMap":false}!.//vue-loader/lib/selector.js?type=styles&index=0!./src/components/About/About.vue 4:14-392 13:3-17:5 14:22-400
@ ./src/components/About/About.vue
@ .//babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Login/Login.vue
@ ./src/components/Login/Login.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

是需要安装什么其他环境吗？

付费请大佬帮忙部署！

大佬有时间的话可以联系我，我已经给您邮箱发了邮件了