利用socket.io+nodejs打造簡單聊天室

代碼地址以下：
http://www.demodashi.com/demo/11579.html

界面展現：

首先展現demo的結果界面，只是簡單消息的發送和接收，包括髮送文字和發送圖片。

ws說明：

在介紹socket.io以前，先簡單介紹一下websocket：

Web Socket的目標是在一個單獨的持久鏈接上提供全雙工，雙向通訊

在JavaScript中創建了Web Socket以後，會有一個HTTP請求發送到瀏覽器以發送鏈接。取得服務器響應以後，創建的鏈接會使用HTTP升級從HTTP協議交換爲WebSocket協議。WebSocket使用了自定義的協議，因此URL模式略有不一樣，未加密的是ws://，加密的是wss://，使用WebSocket的好處在於：能夠在客戶端和服務器端發送少許數據，減小開銷，且因爲全雙工通訊，適合即時應用。可是目前還達不到瀏覽器徹底兼容。

Socket.IO

Socket.IO官網
官網列出了Socket.IO的四大優勢：

• 實時分析：將數據推送到客戶端，這些客戶端會被表示爲實時計數器，圖表或日誌客戶。
• 實時通訊和聊天：只需幾行代碼即可寫成一個Socket.IO的」Hello,World」聊天應用。
• 二進制流傳輸：從1.0版本開始，Socket.IO支持任何形式的二進制文件傳輸，例如：圖片，視頻，音頻等。

• 文檔合併：容許多個用戶同時編輯一個文檔，而且可以看到每一個用戶作出的修改。
  Socket.IO對於支持ws的瀏覽器將採用ws通訊，對於不支持ws的將採用輪詢方式，因此Socket.IO是一個很是適合作即時通信的類庫。

  Socket.IO API

  因爲Socket.IO在不一樣版本中，API會略有不一樣，因此本文介紹依賴於1.4.5版本（2016.9.8）
  官網對於API及用法介紹全面，在此只作簡單總結：
• 一、安裝：npm install socket.io
• 二、客戶端：客戶端需引用socket.io.js

<script src="/javascripts/socket.io.js"></script>
<script>var socket = io.connect();</script>

• 三、服務器端：demo中服務器端採用框架express(~4.13.1)，將引用模塊命名爲io

//引入模塊
var server = app.listen(3000,function(){
          console.log('Express.js server listening on port'+ app.get('port'));});
var io = require('socket.io').listen(server);
//io使用
io.on('connection', function (socket) {}）

• 四、服務器端API

io.on('connection',function(socket){});//創建鏈接
io.sockets.emit(約定參數，data)；//向全體人員廣播
io.emit(約定參數, data);//向全體人員廣播
socket.emit(約定參數，data)//發送信息
socket.on(約定參數，callback）；//接收信息
socket.on('disconnect',callback);//用戶斷開鏈接觸發事件

Socket.IO對於每個鏈接用戶會自動分配一個隨機的，不重複的Socket#id ，經過Socket#id能夠實現將信息分發給我的

var socketId = socket.id;
socket.broadcast.to(socketId ).emit('my message', msg);//socket均爲connect中回調函數中的socket

• 五、客戶端API

socket.emit(約定參數，data)//發送信息
socket.on(約定參數，callback）；//接收信息

• 六、Socket.IO還能夠按照命名空間劃分出不一樣的空間，詳見http://socket.io/docs/rooms-and-namespaces/

  Demo介紹

  package.json

{
  "name": "ezsocket",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "multiparty":"4.1.2",
    "socket.io":"1.4.5",
    "serve-favicon": "~2.3.0"
  }
}

框架及版本如上，視圖採用jade模板，主要過程爲用戶進入聊天室先輸入名字（未查重），點擊肯定後發送名字等信息，進入聊天頁面，在文本框中輸入，點擊發送按鈕，發送信息。接收服務器端的相應信息，對其處理，進行界面的展現。

$(function(){
    var socket=io.connect();
    $('.j_btn').on('click',function(){//進入頁面肯定按鈕點擊事件
        console.log(8888);
        var msg = $('.j_nametext').val();
        socket.emit('login',msg);//向服務器發送用戶註冊名字信息
    })
    $('#j_mesbtn').on('click',function(){//文本框按鈕點擊事件
        var data = $('#j_msgtext').html();
        console.log(data);
        var str = '<li><div class="top-right-content"><pre>'+data+'</pre></div></li>'
        $('.right-top-ul').append(str);
        socket.emit('msg',data);//向服務器發送文本框中信息
    })
    socket.on('system',function(data){//接收服務器端信息
        var str = '<li class="right-top-time" style="color:red">歡迎??'+data+'??進入聊天室，撒花</li>';
        $('.right-top-ul').append(str);
    });
    socket.on('chat',function(data){
        console.log(data);
        var str = '<li><div class="top-left-content"><span>'+data.name+'</span><pre>'+data.data+'</pre></div></li>'
        $('.right-top-ul').append(str);
    })
    socket.on('loginSuccess',function(){//接收服務器端登陸成功信息
        $('.float-player').css('display','none');
        $('.dialog').css('display','none');
    });
    socket.on('disconnect',function(data){//接收服務器端發送的用戶離開的信息
        console.log(data);
        var str = '<li class="right-top-time" style="color:red">??'+data+'??離開了組織，願他早日回到組織的懷抱</li>';
        $('.right-top-ul').append(str);
    });
    $('#j_sendmsg').on('change',function(){//上傳文件事件
        // 判斷上傳文件類型
        var objFile = $('#j_sendmsg').val();
        var objType = objFile.substring(objFile.lastIndexOf(".")).toLowerCase();
        var formData = new FormData(document.forms.namedItem("test"));
        $.ajax({
            type : 'post',
            url : '/uploadUserImgPre',
            data: formData ,
            processData:false,
            async:false,
            cache: false,  
            contentType: false, 
            success:function(re){
                re.imgSrc = re.imgSrc.replace('public','');
                re.imgSrc = re.imgSrc.replace(/\\/g,'\/');
                $('#j_msgtext').append('[站外圖片上傳中……(4)]')
            },
            error:function(re){
                console.log(re);
            }
        }); 
    });
})

服務器端主要功能爲
一、前方發送登陸信息，服務器端接收並廣播給所有用戶，將登陸成功信息傳給客戶端，客戶端進行相應操做。
二、客戶端經過發送按鈕發送信息，服務器端收到後，廣播給除非發送人員全部人。
三、用戶離開，觸發服務器端disconnect,服武器端廣播給全體在線人員。
代碼以下：

io.on('connection', function(socket) {  
  console.log(socket.id);
  var socketId = socket.id;
  socket.on('login',function(nickname){//接收登陸
    socket.nickname = nickname; 
    socket.emit('loginSuccess');//發送登陸成功信息
    io.sockets.emit('system', nickname);//廣播
  });
  socket.on('msg',function(data){//接收文本框中信息
    console.log(data);
    var sendMsg = {'name':socket.nickname,'data':data}
    socket.broadcast.emit('chat',sendMsg);//廣播
  });
  socket.on('disconnect',function(){
    io.sockets.emit('disconnect', socket.nickname);
  })
});

項目文件截圖：

運行：

下載後再package.json所在位置打開命令行，經過npm install安裝依賴，安裝好後經過node app.js 啓動服務，在google瀏覽器中輸入 localhost:3000

總結：

本文對Socket.IO作了簡單瞭解，如有不足或錯誤之處，還請多多指出。利用socket.io+nodejs打造簡單聊天室

代碼地址以下：
http://www.demodashi.com/demo/11579.html

注：本文著做權歸做者，由demo大師代發，拒絕轉載，轉載須要做者受權