Socket.io教程: Express結合Socket.io實現通信: 聊天室及智能客服的簡單演示

基於express的socket.io通信代碼展示

服務端

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.set('view engine','ejs');
app.use(express.static('public'));

app.get('/',function(req,res){
    //res.send('首頁');
    res.render('index');
})

// 監聽端口
server.listen(3000,'127.0.0.1');

// 寫socket的代碼
io.on('connection', function (socket) {
    // console.log('建立鏈接')

    // 羣聊的實現
    socket.on('message1',function(data){
        // console.log(data);

        // 羣聊的實現 1對多，廣播
        io.emit('servermessage',data);   // 服務器給客戶端發送數據
    });
    
    // 智能客服的實現
    socket.on('message2',function(data){
        // console.log(data);

        // 智能客服的實現 1對1，客戶端之間互不影響
        var msg = '';
        if(data == 302) {
            msg = '您當前的話費有100元'
        }else if(data == 301){
            msg = '您當前的流量有2000M'
        } else {
            msg = '請輸入正確的信息'
        }
        socket.emit('servermessage', msg);
    });
});

客戶端

<script src="/jquery-1.11.3.min.js"></script>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>

<input type="text" id="msg"/>
<br/>
<br/>
<button id="send1">羣聊發送</button>
<button id="send2">客服發送</button>

<script>
    $(function(){
        var socket = io.connect('http://127.0.0.1:3000/');

        // 聊天室: 羣聊功能
        $('#send1').click(function(){
            var msg = $('#msg').val();
            socket.emit('message1',msg);  // 客戶端給服務器發送數據
        });

        // 智能客服
        $('#send2').click(function(){
            var msg = $('#msg').val();
            socket.emit('message2',msg);  // 客戶端給服務器發送數據
        });

        // 接受服務器返回的數據
        socket.on('servermessage',function(data){
            console.log(data)
        });
    })
</script>

相關說明

• io.emit 廣播：所有和服務端建立的客戶端都能收到信息
• socket.emit 單播：單個socket互不影響，誰給我發的信息我回返回給誰
• 可以在打開多個客戶端頁面做對比測試