node+socket.io 實現一個聊天室

伯涵發表於2019-01-06

我們只做簡單的實現，不接入資料庫，nodejs也不使用express和koa等框架  

因此依賴只有兩個： 1、socket.io 2、mime（用於獲取靜態資源時獲取檔案的mime型別） 

 安裝命令： npm install socket.io mime --save 

 其他的就不贅述了 先描述一下檔案目錄結構

node+socket.io 實現一個聊天室

靜態 js 和 css 檔案放在 public 下面的相應目錄下

socket連線是基於tcp的因此需要給socket傳入一個http服務的例項，這樣就能啟動socket服務

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer();
io = socketio(server);
 
server.listen(3001);
複製程式碼

當然，socket.io不止提供了一種啟動方式，這裡就不一一列舉了 

 socketio(server) 返回的是一個 socket 例項，通過這個例項可以監聽客戶端的 connection事件，事件監聽的第二個引數是一個回撥函式，會掉函式也會返回一個socket物件，這個 socket 物件可以監聽這個連結的另一端觸發的事件（這裡就是客戶端）  

這裡需要搞清楚的一點是，每個socket連線都會在 connection 事件的回撥中返回一個socket 物件，這個物件可監聽對應客戶端觸發的事件，也可以向其他的socket物件廣播訊息 

 通過connection 事件返回的 socket 物件觸發和監聽事件： 

io.on('connection', function(socket) {
    // 監聽客戶端傳送的message事件
    socket.on('message', function() {
        // 向同一個房間中的其他使用者廣播訊息
        socket.broadcast.to(message.room).emit('message', {
            text: nickNames[socket.id] + ': ' + message.text
        });
        
    });
 
    // 觸發事件
    socket.emit('message', {
        nick: 'Lily',
        content: 'hello world!'
    });
});
複製程式碼

現在我們知道了如何在服務端建立socket 服務，那麼客戶端應該應該怎麼和服務端的socket服務建立連線呢？

html頁面引入的其他 js 檔案這裡就不說了，這裡需要說明的是socket.io.js：

<script src="/socket.io/socket.io.js"></script>
複製程式碼

我剛開始的時候也是很疑惑，因為這個檔案在我的服務其中根本不存在。事實是，這個檔案是socket 伺服器啟動後自動生成的。因此我們只需要在html檔案中按照這個路徑引入就行了。 

引入socket.io.js 後就會有一個全域性的 io 物件，用於觸發事件和監聽伺服器 socket 伺服器觸發的事件 客戶端事件監聽：

var socket = io.connect();
 
$(document).ready(function() {
    // 監聽伺服器傳送的事件
    socket.on('message', function(message) {
        var newElement = $('<div class="msg-box"></div>').append($('<span></span>').text(message.text));
 
        $('#messages').append(newElement);
    });
 
});
複製程式碼

客戶端觸發事件：

socket.emit('message', {
    nick: 'Lily',
    content: 'yes! I hear you now'
});
複製程式碼

message可以是物件也可以是字串

這樣建立連線設定監聽後就可以和服務端通過事件進行通訊了

服務端監聽到客戶端發來的訊息後向該房間所有使用者廣播訊息：

socket.broadcast.to(currentRoom[socket.id]).emit('message', {
    text: previousName + ' 現在已更名為 ' + name + '.'
});
複製程式碼

結合以上描述的這些方法，就能完整搭建一個聊天室了，關於前端頁面的結構和頁面事件的邏輯我這裡就不詳細說了

我把我的demo放到了github上，有興趣的同學可以看看：github.com/SailorCai/n…






相關文章