Vue全家桶+Socket.io+Koa2打造一個智能聊天室接口已開放

時間 2019-11-05

標籤 vue 全家 socket.io+koa2 socket koa 打造一個智能聊天室接口開放欄目應用數學简体版

原文原文鏈接

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

Vue.js全家桶+Socket.io+Express/Koa2 打造的一個智能聊天室。
已經開源啦！爲了方便你們學習，智能機器人、IP定位接口也開放了！接口請在源碼中查看😄javascript

QQ羣裏面的智能機器人很火，因而用Vue.js+Socket.io+Koa2打造了一個智能聊天室，實現了IP定位、在線羣聊，加入了Emoji表情😄，以及接入了智能機器人😏css

前言

話說最近前端技術圈也有派系之爭了，是好事仍是壞事？蘿蔔青菜各有所愛，本項目採用的是Vue.js作前端頁面展現，你們徹底能夠換成本身別的喜歡的，React、Angular等等，每一個框架都有可取的地方，這裏很少說😂下面扯到正題上👇html

預覽

在線預覽地址：👉 microzz.com/vue-chat/前端

源代碼

如今已經開源： 👉github.com/microzz/vue…
歡迎star和提出寶貴意見😄vue

技術棧

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在服務端能夠這樣作:java

// 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);
  });
});複製代碼

客戶端代碼webpack

// 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 能夠輕鬆地實現服務器與客戶端之間的雙向通訊。ios

emit ：用來發射一個事件或者說觸發一個事件，第一個參數爲事件名，第二個參數爲要發送的數據，第三個參數爲回調函數（通常省略，如需對方接受到信息後當即獲得確認時，則須要用到回調函數）。
on ：用來監聽一個 emit 發射的事件，第一個參數爲要監聽的事件名，第二個參數爲一個匿名函數用來接收對方發來的數據，該匿名函數的第一個參數爲接收的數據，如有第二個參數，則爲要返回的函數。
socket.io 提供了三種默認的事件（客戶端和服務器都有）：connect 、message 、disconnect 。當與對方創建鏈接後自動觸發 connect 事件，當收到對方發來的數據後觸發 message 事件（一般爲 socket.send() 觸發），當對方關閉鏈接後觸發 disconnect 事件。git

此外，socket.io 還支持自定義事件，畢竟以上三種事件應用範圍有限，正是經過這些自定義的事件才實現了豐富多彩的通訊。github

最後，須要注意的是，在服務器端區分如下三種狀況：

socket.emit() ：向創建該鏈接的客戶端廣播
socket.broadcast.emit() ：向除去創建該鏈接的客戶端的全部客戶端廣播
io.sockets.emit() ：向全部客戶端廣播，等同於上面兩個的和

目前聊天室指向的是個人域名，能夠參與聊天室的聊天，你們也能夠在index.html文件中更改。

Vue.js

在Vue的方面就比較常規了，Vue全家桶：Vue2.0+Vuex+axios+vue-router,我GitHub的有幾個開源項目能夠參考👉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的組合，讓異步操做更加合理。