通過參考koa中間件，socket.io遠程事件調用，以一種新的姿勢來使用WebSocket。

瀏覽器端

瀏覽器端使用WebSocket很簡單

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});
 

MDN關於WebSocket的介紹

能註冊的事件有onclose，onerror，onmessage，onopen。用的比較多的是onmessage，從服務器接受到數據後，會觸發message事件。通過註冊相應的事件處理函數，可以根據後端推送的數據做相應的操作。

如果只是寫個demo,單單輸出後端推送的信息,如下使用即可：

socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

實際使用過程中，我們需要判斷後端推送的數據然後執行相應的操作。比如聊天室應用中，需要判斷消息是廣播的還是私聊的或者群聊的，以及是純文字信息還是圖片等多媒體信息。這時message處理函數裏可能就是一堆的if else。那麽有沒有什麽別的優雅的姿勢呢？答案就是中間件與事件，跨進程的事件的發布與訂閱。在說遠程事件發布訂閱之前，需要先從中間件開始，因為後面實現的遠程事件發布訂閱是基於中間件的。

中間件

前面說了，在WebSocket實例上可以註冊事件有onclose，onerror，onmessage，onopen。每一個事件的處理函數裏可能需要做各種判斷，特別是message事件。參考koa，可以將事件處理函數以中間件方式來進行使用，將不同的操作邏輯分發到不同的中間件中，比如聊天室應用中，聊天信息與系統信息(比如用戶登錄屬於系統信息)是可以放到不同的中間件中處理的。

koa提供use接口來註冊中間件。我們針對不同的事件提供相應的中間件註冊接口，並且對原生的WebSocket做封裝。

export default class EasySocket{
    constructor(config) {
       this.url = config.url;
       this.openMiddleware = [];
       this.closeMiddleware = [];
       this.messageMiddleware = [];
       this.errorMiddleware = [];
       
       this.openFn = Promise.resolve();
       this.closeFn = Promise.resolve();
       this.messageFn = Promise.resolve();
       this.errorFn = Promise.resolve();
    }
    openUse(fn) {
        this.openMiddleware.push(fn);
        return this;
    }
    closeUse(fn) {
        this.closeMiddleware.push(fn);
        return this;
    }
    messageUse(fn) {
        this.messageMiddleware.push(fn);
        return this;
    }
    errorUse(fn) {
        this.errorMiddleware.push(fn);
        return this;
    }
}
 

通過xxxUse註冊相應的中間件。 xxxMiddleware中就是相應的中間件。xxxFn 中間件通過compose處理後的結構

再添加一個connect方法，處理相應的中間件並且實例化原生WebSocket

connect(url) {
        this.url = url || this.url;
        if (!this.url) {
            throw new Error('url is required!');
        }
        try {
            this.socket = new WebSocket(this.url, 'echo-protocol');
        } catch (e) {
            throw e;
        }

        this.openFn = compose(this.openMiddleware);
        this.socket.addEventListener('open', (event) => {
            let context = { client: this, event };
            this.openFn(context).catch(error => { console.log(error) });
        });

        this.closeFn = compose(this.closeMiddleware);
        this.socket.addEventListener('close', (event) => {
            let context = { client: this, event };
            this.closeFn(context).then(() => {
            }).catch(error => {
                console.log(error)
            });
        });

        this.messageFn = compose(this.messageMiddleware);
        this.socket.addEventListener('message', (event) => {
            let res;
            try {
                res = JSON.parse(event.data);
            } catch (error) {
                res = event.data;
            }
            let context = { client: this, event, res };
            this.messageFn(context).then(() => {

            }).catch(error => {
                console.log(error)
            });
        });

        this.errorFn = compose(this.errorMiddleware);
        this.socket.addEventListener('error', (event) => {
            let context = { client: this, event };
            this.errorFn(context).then(() => {

            }).catch(error => {
                console.log(error)
            });
        });
        return this;
    }

使用koa-compose模塊處理中間件。註意context傳入了哪些東西，後續定義中間件的時候都已使用。

compose的作用可看這篇文章 傻瓜式解讀koa中間件處理模塊koa-compose

然後就可以使用了：

new EasySocket()
  .openUse((context, next) => {
    console.log("open");
    next();
  })
  .closeUse((context, next) => {
    console.log("close");
    next();
  })
  .errorUse((context, next) => {
    console.log("error", context.event);
    next();
  })
  .messageUse((context, next) => {
    //用戶登錄處理中間件
    if (context.res.action === 'userEnter') {
      console.log(context.res.user.name+' 進入聊天室');
    }
    next();
  })
  .messageUse((context, next) => {
    //創建房間處理中間件
    if (context.res.action === 'createRoom') {
      console.log('創建房間 '+context.res.room.anme);
    }
    next();
  })
  .connect('ws://localhost:8080')

可以看到，用戶登錄與創建房間的邏輯放到兩個中間件中分開處理。不足之處就是每個中間件都要判斷context.res.action，而這個context.res就是後端返回的數據。怎麽消除這個頻繁的if判斷呢? 我們實現一個簡單的消息處理路由。

路由

定義消息路由中間件

messageRouteMiddleware.js

export default (routes) => {
    return async (context, next) => {
        if (routes[context.req.action]) {
            await routes[context.req.action](context,next);
        } else {
            console.log(context.req)
            next();
        }
    }
}

定義路由

router.js

export default {
    userEnter:function(context,next){
        console.log(context.res.user.name+' 進入聊天室');
        next();
    },
    createRoom:function(context,next){
        console.log('創建房間 '+context.res.room.anme);
        next();
    }
}

使用：

new EasySocket()
  .openUse((context, next) => {
    console.log("open");
    next();
  })
  .closeUse((context, next) => {
    console.log("close");
    next();
  })
  .errorUse((context, next) => {
    console.log("error", context.event);
    next();
  })
  .messageUse(messageRouteMiddleware(router))//使用消息路由中間件，並傳入定義好的路由
  .connect('ws://localhost:8080')

一切都變得美好了，感覺就像在使用koa。想一個問題，當接收到後端推送的消息時，我們需要做相應的DOM操作。比如路由裏面定義的userEnter，我們可能需要在對應的函數裏操作用戶列表的DOM，追加新用戶。這使用原生JS或JQ都是沒有問題的，但是如果使用vue,react這些，因為是組件化的，用戶列表可能就是一個組件，怎麽訪問到這個組件實例呢？(當然也可以訪問vuex,redux的store,但是並不是所有組件的數據都是用store管理的)。

我們需要一個運行時註冊中間件的功能，然後在組件的相應的生命周期鉤子裏註冊中間件並且傳入組件實例

運行時註冊中間件，修改如下代碼：

messageUse(fn, runtime) {
        this.messageMiddleware.push(fn);
        if (runtime) {
            this.messageFn = compose(this.messageMiddleware);
        }
        return this;
    }

修改 messageRouteMiddleware.js

export default (routes,component) => {
    return async (context, next) => {
        if (routes[context.req.action]) {
            context.component=component;//將組件實例掛到context下
            await routes[context.req.action](context,next);
        } else {
            console.log(context.req)
            next();
        }
    }
}

類似vue mounted中使用

mounted(){
  let client = this.$wsClients.get("im");//獲取指定EasySocket實例
  client.messageUse(messageRouteMiddleware(router,this),true)//運行時註冊中間件，並傳入定義好的路由以及當前組件中的this
}

路由中通過 context.component 即可訪問到當前組件。

完美了嗎？每次組件mounted 都註冊一次中間件，問題很大。所以需要一個判斷中間件是否已經註冊的功能。也就是一個支持具名註冊中間件的功能。這裏就暫時不實現了，走另外一條路，也就是之前說到的遠程事件的發布與訂閱，我們也可以稱之為跨進程事件。

跨進程事件

看一段socket.io的代碼：

Server (app.js)

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');
app.listen(80);
function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}
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('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

註意力轉到這兩部分：

服務端

  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });

客戶端

  var socket = io('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });

使用事件，客戶端通過on訂閱‘news‘事件，並且當觸發‘new’事件的時候通過emit發布‘my other event‘事件。服務端在用戶連接的時候發布‘news‘事件，並且訂閱‘my other event‘事件。

一般我們使用事件的時候，都是在同一個頁面中on和emit。而socket.io的神奇之處就是同一事件的on和emit是分別在客戶端和服務端，這就是跨進程的事件。

那麽，在某一端emit某個事件的時候，另一端如果on監聽了此事件，是如何知道這個事件emit(發布)了呢？

沒有看socket.io源碼之前，我設想應該是emit方法裏做了某些事情。就像java或c#，實現rpc的時候，可以依據接口定義動態生成實現(也稱為代理)，動態實現的(代理)方法中，就會將當前方法名稱以及參數通過相應協議進行序列化，然後通過http或者tcp等網絡協議傳輸到RPC服務端，服務端進行反序列化，通過反射等技術調用本地實現，並返回執行結果給客戶端。客戶端拿到結果後，整個調用完成，就像調用本地方法一樣實現了遠程方法的調用。

看了socket.io emit的代碼實現後，思路也是大同小異，通過將當前emit的事件名和參數按一定規則組合成數據，然後將數據通過WebSocket的send方法發送出去。接收端按規則取到事件名和參數，然後本地觸發emit。(註意遠程emit和本地emit，socket.io中直接調用的是遠程emit)。

下面是實現代碼，事件直接用的emitter模塊，並且為了能自定義emit事件名和參數組合規則，以中間件的方式提供處理方法：

export default class EasySocket extends Emitter{//繼承Emitter
    constructor(config) {
       this.url = config.url;
       this.openMiddleware = [];
       this.closeMiddleware = [];
       this.messageMiddleware = [];
       this.errorMiddleware = [];
       this.remoteEmitMiddleware = [];//新增的部分
       
       this.openFn = Promise.resolve();
       this.closeFn = Promise.resolve();
       this.messageFn = Promise.resolve();
       this.errorFn = Promise.resolve();
       this.remoteEmitFn = Promise.resolve();//新增的部分
    }
    openUse(fn) {
        this.openMiddleware.push(fn);
        return this;
    }
    closeUse(fn) {
        this.closeMiddleware.push(fn);
        return this;
    }
    messageUse(fn) {
        this.messageMiddleware.push(fn);
        return this;
    }
    errorUse(fn) {
        this.errorMiddleware.push(fn);
        return this;
    }
    //新增的部分
    remoteEmitUse(fn, runtime) {
        this.remoteEmitMiddleware.push(fn);
        if (runtime) {
            this.remoteEmitFn = compose(this.remoteEmitMiddleware);
        }
        return this;
    }
    connect(url) {
       ...
       //新增部分
       this.remoteEmitFn = compose(this.remoteEmitMiddleware);
    }
    //重寫emit方法，支持本地調用以遠程調用
    emit(event, args, isLocal = false) {
        let arr = [event, args];
        if (isLocal) {
            super.emit.apply(this, arr);
            return this;
        }
        let evt = {
            event: event,
            args: args
        }
        let remoteEmitContext = { client: this, event: evt };
        this.remoteEmitFn(remoteEmitContext).catch(error => { console.log(error) })
        return this;
    }
}

下面是一個簡單的處理中間件：

client.remoteEmitUse((context, next) => {
    let client = context.client;
    let event = context.event;
    if (client.socket.readyState !== 1) {
      alert("連接已斷開!");
    } else {
      client.socket.send(JSON.stringify({
        type: 'event',
        event: event.event,
        args: event.args
      }));
      next();
    }
  })

意味著調用

client.emit('chatMessage',{
    from:'admin',
    masg:"Hello WebSocket"
});

就會組合成數據

{
    type: 'event',
    event: 'chatMessage',
    args: {
        from:'admin',
        masg:"Hello WebSocket"
    }
}

發送出去。

服務端接受到這樣的數據，可以做相應的數據處理（後面會使用nodejs實現類似的編程模式），也可以直接發送給別的客戶端。客戶受到類似的數據，可以寫專門的中間件進行處理，比如：

client.messageUse((context, next) => {
    if (context.res.type === 'event') {
      context.client.emit(context.res.event, context.res.args, true);//註意這裏的emit是本地emit。
    }
    next();
})

如果本地訂閱的chatMessage事件，回到函數就會被觸發。

在vue或react中使用，也會比之前使用路由的方式簡單

mounted() {
   let client = this.$wsClients.get("im");
   client.on("chatMessage", data => {
      let isSelf = data.from.id == this.user.id;
      let msg = {
        name: data.from.name,
        msg: data.msg,
        createdDate: data.createdDate,
        isSelf
      };
      this.broadcastMessageList.push(msg);
    });
}

組件銷毀的時候移除相應的事件訂閱即可，或者清空所有事件訂閱

destroyed() {
    let client = this.$wsClients.get("im");
    client.removeAllListeners();
}

心跳重連

核心代碼直接從websocket-heartbeat-js copy過來的(用npm包，還得在它的基礎上再包一層)，相關文章 初探和實現websocket心跳重連。

核心代碼：

    heartCheck() {
        this.heartReset();
        this.heartStart();
    }
    heartStart() {
        this.pingTimeoutId = setTimeout(() => {
            //這裏發送一個心跳，後端收到後，返回一個心跳消息
            this.socket.send(this.pingMsg);
            //接收到心跳信息說明連接正常,會執行heartCheck(),重置心跳(清除下面定時器)
            this.pongTimeoutId = setTimeout(() => {
                //此定時器有運行的機會，說明發送ping後，設置的超時時間內未收到返回信息
                this.socket.close();//不直接調用reconnect，避免舊WebSocket實例沒有真正關閉，導致不可預料的問題
            }, this.pongTimeout);
        }, this.pingTimeout);
    }
    heartReset() {
        clearTimeout(this.pingTimeoutId);
        clearTimeout(this.pongTimeoutId);
    }

最後

源碼地址：easy-socket-browser

nodejs實現的類似的編程模式(有空再細說)：easy-socket-node

實現的聊天室例子：online chat demo

聊天室前端源碼：lazy-mock-im

聊天室服務端源碼：lazy-mock

以中間件，路由，跨進程事件的姿勢使用WebSocket