使用socket.io與express結合，體驗websocket

前言

自己於express框架的基礎上，以node爲服務端，基於socket.io，實現了一個建議的聊天室。 
成功從服務端推送數據到客戶端。 
效果如下圖： 
 
將客戶端的信息傳遞到服務端後，服務端主動推送給客戶端。

websocket原理

簡單來說，就是服務端主動推送信息給客戶端。看看其與http協議的區別： 

websocket有如下特點： 
其他特點包括： 
　　（1）建立在 TCP 協議之上，服務器端的實現比較容易。 
　　（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段採用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。 
　　（3）數據格式比較輕量，性能開銷小，通信高效。 
　　（4）可以發送文本，也可以發送二進制數據。 
　　（5）沒有同源限制，客戶端可以與任意服務器通信。 
　　（6）協議標識符是ws（如果加密，則爲wss），服務器網址就是 URL。 
ws://example.com:80/some/path

可以看看理解： 

服務端實現

服務端是基於node的web框架express，在其基礎上，使用socket.io模塊來實現的。 
首先安裝socket.io:

npm install --save-dev socket.io 

• 1

然後在對應的模塊監聽：

var express = require('express');
var router = express.Router();
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

io.on('connection', function(socket){
    console.log('a user connected');

    socket.on("disconnect", function() {
        console.log("a user go out");
    });

    socket.on("message", function(obj) {
        //延遲3s返回信息給客戶端
        setTimeout(function(){
            console.log('the websokcet message is'+obj);
            io.emit("message", obj);
        },3000);
    });
});
//開啓端口監聽socket
server.listen(3001);

router.get('/imRoom', function(req, res, next) {
    res.render('im/imRoom');
});


module.exports = router;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

客戶端

客戶端也需要對應引入一個socket.io.js文件。

define(['jquery','socketIo'],function(jq,io){

    var sendNode = jq('.j-send');
    var btnNode = jq('.j-btn');
    var contentNode = jq('.j-content');
    //建立連接
    socket = io.connect('ws://127.0.0.1:3001');

    btnNode.on('click',function(){
        var sendText = sendNode.val();
        //向服務端發送信息
        socket.emit("message", {msg:sendText});

    });
    //接收服務端推送的信息
    socket.on("message", function(obj) {
        var curContent = contentNode.html();
        contentNode.html(curContent+obj.msg);
    });
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

看起來是不是很簡單就實現了。其實websocket的使用還需要考慮很多因素，比如性能、負載等等。這裏只是簡單的體驗了一些。