Vue全家桶+Socket.io+Koa2打造一個智慧聊天室 介面已開放

microzz發表於2017-05-10
Vue

Vue.js+Socket.io+Koa2打造一個智慧聊天室

Vue.js全家桶+Socket.io+Express/Koa2 打造的一個智慧聊天室。
已經開源啦！為了方便大家學習，智慧機器人、IP定位介面也開放了！介面請在原始碼中檢視?

   QQ群裡面的智慧機器人很火，於是用Vue.js+Socket.io+Koa2打造了一個智慧聊天室，實現了IP定位、線上群聊，加入了Emoji表情?，以及接入了智慧機器人?

前言

話說最近前端技術圈也有派系之爭了，是好事還是壞事？蘿蔔青菜各有所愛，本專案採用的是Vue.js做前端頁面展示，大家完全可以換成自己別的喜歡的，React、Angular等等，每個框架都有可取的地方，這裡不多說?下面扯到正題上?

預覽

線上預覽地址：? microzz.com/vue-chat/

Vue全家桶+Socket.io+Koa2打造一個智慧聊天室 介面已開放
Vue.js+Socket.io 智慧聊天室 microzz.com

Vue全家桶+Socket.io+Koa2打造一個智慧聊天室 介面已開放
Vue.js+Socket.io 智慧聊天室 microzz.com

原始碼

現在已經開源： ?github.com/microzz/vue…
歡迎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() ：向所有客戶端廣播，等同於上面兩個的和

目前聊天室指向的是我的域名，可以參與聊天室的聊天，大家也可以在index.html檔案中更改。

Vue.js

在Vue的方面就比較常規了，Vue全家桶：Vue2.0+Vuex+axios+vue-router,我GitHub的有幾個開源專案可以參考?github.com/microzz

總結

  1. 元件狀態多了用Vuex管理很方便，引用 Redux 的作者 Dan Abramov 的話說就是：

    Flux 架構就像眼鏡：您自會知道什麼時候需要它。

  2. 事先一定要先想好整個頁面組成，怎樣去分元件開發，這樣在開發階段會事半功倍。

  3. Moment.js在Vue中用ES6的方式引入會有問題，可以嘗試在main.js嘗試這樣import moment from 'moment' Vue.prototype.moment = moment;給Vue的原型上新增moment，這樣就可以在Vue的例項中隨意使用它了。
  4. get方式通過URL傳參最好使用encodeURI對引數進行編碼
  5. 一定要處理好那些非同步操作，否則會帶來各種問題。開發階段使用的是Promise，上線時候使用了ES7的Async+Promise的組合，讓非同步操作更加合理。

About

關於我：?microzz.com/about/
GitHub：? github.com/microzz
E-mail: ? zhaohui@microzz.com

相關文章