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

咱們只作簡單的實現，不接入數據庫，nodejs也不使用express和koa等框架  

所以依賴只有兩個： 一、socket.io 二、mime（用於獲取靜態資源時獲取文件的mime類型） 

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

 其餘的就不贅述了 先描述一下文件目錄結構

靜態 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…