Vue全家桶+Socket.io+Koa2打造一個智能聊天室 接口已開放
Vue.js+Socket.io+Koa2打造一個智能聊天室
Vue.js全家桶+Socket.io+Express/Koa2 打造的一個智能聊天室。
已經開源啦！為了方便大家學習，智能機器人、IP定位接口也開放了！接口請在源碼中查看:smile:
QQ群里面的智能機器人很火，于是用Vue.js+Socket.io+Koa2打造了一個智能聊天室，實現了IP定位、在線群聊，加入了Emoji表情:smile:，以及接入了智能機器人:smirk:
前言
話說最近前端技術圈也有派系之爭了，是好事還是壞事？蘿卜青菜各有所愛，本項目采用的是Vue.js做前端頁面展示，大家完全可以換成自己別的喜歡的，React、Angular等等，每個框架都有可取的地方，這里不多說:joy:下面扯到正題上:point_down:
預覽
在線預覽地址：:point_right: https://microzz.com/vue-chat/
源代碼
現在已經開源： :point_right: https://github.com/microzz/vu...
歡迎star和提出寶貴意見:smile:
技術棧
-
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預處理語言，有些地方很方便，個人很喜歡用。(詳看:point_right: 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);
});
});</code></pre>
客戶端代碼
// 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></code></pre>
不管是服務器還是客戶端都有 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的有幾個開源項目可以參考:point_right: 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
關于我：:point_right: https://microzz.com/about/
GitHub：:point_right: https://github.com/microzz
E-mail: :point_right: zhaohui@microzz.com
個人網站： :point_right: https://microzz.com/