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
技術棧
- 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，你只需要安裝依賴就可以，使用的時候只需要。
- 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]