在vue及egg中使用socket.io

01-31

http://vue-socket.io 及 http://egg-socket.io 的簡單使用

這是一篇究極文不對題的博客，因為我要介紹的並不是 http://socket.io 在 vue 以及 egg 的使用。

既然你還想知道然後。。。。。。。我就告訴你

這裡要介紹的是 http://vue-socket.io 以及 http://egg-socket.io。

因為最近手又癢了想寫個聊天室熟悉下 vue 以及 nodeJs。

真實原因是，我身邊最後一個單身的程序員竟然也找到了女朋友

噩耗傳來

一番思考

我想通了

故事講完了。

總結：聊天室項目，前端 vue，後端 egg，使用 http://vue-socket.io，http://egg-socket.io

http://egg-socket.io 的使用

官方文檔看這裡 egg-socket.io

接下來的內容其實與文檔里差不多，介意的童鞋略過就好，目前只是簡單的引入，下周往後會寫複雜些的邏輯，在後面的文章會介紹。

貼下目錄結構

1. 下載安裝

$ npm install --save egg-socket.ion

2. 開啟插件以及插件配置

開啟插件

// app/config/plugin.jsnexports.io = {n enable: true,n package: egg-socket.ion};n

插件配置

// app/config/config.default.jsn// 這裡的 auth 以及 filter 是待會會編寫的兩個中間件，用於不用依據自己的情況選擇即可nexports.io = {n namespace: {n /: {n connectionMiddleware: [ auth ],n packetMiddleware: [ filter ],n }n }n};n

3. 編寫中間件

// app/io/middlewware/auth.jsn// 這個中間件的作用是提示用戶連接與斷開的，連接成功的消息發送到客戶端，斷開連接的消息在服務端列印nmodule.exports = app => {n return function* (next) {n this.socket.emit(res, connected!);n yield* next;n console.log(disconnection!);n };n};nn// app/io/middleware/filter.jsn// 這個中間件的作用是將接收到的數據再發送給客戶端nmodule.exports = app => {n return function* (next) {n this.socket.emit(res, packet received!);n console.log(packet:, this.packet);n yield* next;n };n};n

4. 編寫控制器

// app/io/controller/chat.jsn// 將收到的消息發送給客戶端nmodule.exports = app => {n return function* () {n const self = this;n const message = this.args[0];n console.log(chat 控制器列印, message);n this.socket.emit(res, `Hi! Ive got your message: ${message}`);n };n};n

5. 編寫路由

// app/router.jsn// 這裡表示對於監聽到的 chat 事件，將由 app/io/controller/chat.js 處理nmodule.exports = app => {n app.io.of(/).route(chat, app.io.controllers.chat);n};n

tip：

// controller 中n// 發送給自己nthis.socket.emit(eventName, value);n// 發送給除了自己外的所有人nthis.socket.broadcast.emit(eventName, value);n// 發送給所有人，包括自己nthis.server.sockets.emit(eventName, value);n

前兩種書寫方式都與 http://socket.io 一致，最後一種 http://socket.io 使用的是 io.sockets.emit，但是無奈小白怎麼都找不到這個 io，但是這怎麼可能阻止機制的我呢，直接開 debug 模式，將當前環境下的對象列印出來，找到了一個個 server，裡面有 sockets 對象，試了下，竟然成功了，暫時沒時間研究為什麼，等項目寫的差不多了，對 egg 了解多點再回頭填這個坑吧，先立個 flag。

寫到這裡 npm run dev 沒報錯的話應該是問題不大，但是要測試是否成功，我們需要在前端也用上 socket。

http://vue-socket.io 的使用

這裡是沒有加上 vuex 的食用方法，後續會補上。

文檔在這裡vue-socket.io。

因為涉及到的文件比較少，這裡就不貼目錄結構了，這邊的項目是 vue-cli 初始化的，所以看客老爺腦補下就好。

1. 下載

$ npm install --save vue-socket.ion

2. 連接伺服器，以及接收服務端消息

// src/main.jsnimport VueSocketio from vue-socket.io;nnVue.use(VueSocketio, http://127.0.0.1:7001/);nnnew Vue({n el: #app,n router,n template: <App/>,n components: { App },n sockets: {n connect: function () {n console.log(socket connected);n },n res: function (val) {n console.log(接收到服務端消息, val);n }n }n});n

Vue.use()裡面的 url 是你伺服器地址。

connect 是 http://socket.io 默認的事件，看這名字就知道是幹啥的了，另外一個 res 是自定義的監聽事件，表示監聽服務端發送的名為 res 的事件。

3. 向服務端發送消息

<script>n// ...nmethods: {n sendMessageToServer: function() {n this.$socket.emit(chat, 111111111111);n }n}n</script>n

這裡我們使用的事件名為 chat，所以服務端會將這條消息交給 chat.js（就是上面伺服器端項目裡面的文件啦）這個控制器處理。

效果如圖

![](https://ws1.sinaimg.cn/large/006tNc79ly1fhu0etwztjg30zg0k4e8j.gif)

知乎好像不支持動圖，可以到我的博客看，點擊這裡

開始報的錯誤是因為後端伺服器沒打開，連接失敗，至於那個 undefined 也可以忽略，這是安裝的一個 chrome 插件報的，好像是收趣搞得鬼。

左邊窗口是服務端列印的內容，右邊自然是客戶端的列印啦。

以上。

參考鏈接

egg-socket.io
vue-socket.io