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/

源代碼

如今已經開源： ?https://github.com/microzz/vu...
歡迎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

總結

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/