socket.io學習筆記

socket.io學習筆記一

排版若亂掉，請參考https://www.zybuluo.com/bornkiller/note/5273

細節問題

• 瀏覽器端socket.io文件加載

<script src="/socket.io/socket.io.js"></script>

官方示例，使人迷惑。查閱得知，socket.io 庫會攔截/socket.io開始的全部路徑，當作普通http請求進行響應，返回文件須要通過服務器端處理，我用瀏覽器保存了一份http://snowykiss.qiniudn.com/socket.io.js，方便查閱。

• 命名空間
  假設服務器地址爲http://127.0.0.1

var io = require('socket.io').listen(1338);
io.sockets.on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('love',{'title' : 'I LOVE you forever...'
           ,'reason' : 'unbelieve'
        });
    });
});

var socket = io.connect('http://127.0.0.1:1338')
socket.on('love',function(data){
   console.log(data);
})

這裏的broadcast會向其它全部鏈接到此端口的client side發送消息.

var io = require('socket.io').listen(1338);
io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('love',{'title' : 'I LOVE you forever...'
            ,'reason' : 'unbelieve'
        });
    });
});

var socket = io.connect('http://127.0.0.1:1338/some')
socket.on('love',function(data){
   console.log(data);
})

這裏的broadcast只會向url參數爲http://127.0.0.1:1338/some發送消息，雖然全部的鏈接都是websocket--http://127.0.0.1:1338/的鏈接。

• 若是不想使用自定義事件，經過socket.emit('customEvent',data)的方式推送消息，官方支持socket.send()方法。服務器端經過socket.on('message',function(data){}),瀏覽器端一樣經過socket.on('message',function(data){})獲取數據，注意這是預置的事件。

• Worker模式
  不知道websocket對瀏覽器的壓力是否過大，若是擔憂websocket進程壓力，能夠啓用worker模式，不過須要將socket.io事件封裝方式，經過worker.postMessage()配合Worker message Event從新封裝一遍，感受挺雞肋。

importScripts('socket.io.js');

var socket = io.connect('http://127.0.0.1:1338/');
var self = this;
socket.on('butterfly',function(data){
    self.postMessage({"name" : "butterfly","data" : data});
});
socket.on('love',function(data){
     self.postMessage({"name" : "love","data" : data});
})

下面是我用Worker微擴展測試，聲明新的Worker對象後，就能夠監聽自定義僞事件，跟socket.io保持同步的on方法，其它僞事件監聽應該類似，不作衍生說明

Worker.prototype.reg = {};
Worker.prototype.on = function (event,fn) {
    if (!this.reg[event]) {
      this.reg[event] = fn;
    } else if (typeof(this.reg[event]) == 'array') {
      this.reg[event].push(fn);
    } else {
      this.reg[event] = [this.reg[event], fn];
    }
};
var story = new Worker('lover.js');
story.on('love',function(e){
       console.log(e.data);
})
story.addEventListener('message', function (e) {
    if(e.data.name){
        this.reg[e.data.name].call(this, e.data);
    }
});