我們只做簡單的實現,不接入數據庫,nodejs也不使用express和koa等框架
因此依賴只有兩個:
1、socket.io
2、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上,有興趣的同學可以看看:https://github.com/SailorCai/node-socket