node.js中的Socket.IO使用實例
1. 簡介
首先是Socket.IO的官方網(wǎng)站：http://socket.io
官網(wǎng)非常簡潔，甚至沒有API文檔，只有一個簡單的“How to use”可以參考。因為Socket.IO就跟官網(wǎng)一樣簡潔好用易上手。
那么Socket.IO到底是什么呢？Socket.IO是一個WebSocket庫，包括了客戶端的js和服務(wù)器端的nodejs，它的目標(biāo)是構(gòu)建可以在不同瀏覽器和移動設(shè)備上使用的實時應(yīng)用。它會自動根據(jù)瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現(xiàn)網(wǎng)絡(luò)實時應(yīng)用，非常方便和人性化，而且支持的瀏覽器最低達(dá)IE5.5，應(yīng)該可以滿足絕大部分需求了。
2. 安裝部署
2.1 安裝
首先安裝非常簡單，在node.js環(huán)境下只要一句：
npm install socket.io
2.2 結(jié)合express來構(gòu)建服務(wù)器
express是一個小巧的Node.js的Web應(yīng)用框架，在構(gòu)建HTTP服務(wù)器時經(jīng)常使用到，所以直接以Socket.IO和express為例子來講解。
var express = require('express')
, app = express()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
server.listen(3001);
若不使用express，請參考socket.io/#how-to-use
3. 基本使用方法
主要分為服務(wù)器端和客戶端兩段代碼，都非常簡單。
Server（app.js）：
//接上面的代碼
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');});
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('other event', function (data) {
console.log(data);
});
});
首先io.sockets.on函數(shù)接受字符串"connection"作為客戶端發(fā)起連接的事件，當(dāng)連接成功后，調(diào)用帶有socket參數(shù)的回調(diào)函數(shù)。我們在使用socket.IO的時候，基本上都在這個回調(diào)函數(shù)里面處理用戶的請求。
socket最關(guān)鍵的是emit和on兩個函數(shù)，前者提交（發(fā)出）一個事件（事件名稱用字符串表示），事件名稱可以自定義，也有一些默認(rèn)的事件名稱，緊接著是一個對象，表示向該socket發(fā)送的內(nèi)容；后者接收一個事件（事件名稱用字符串表示），緊接著是收到事件調(diào)用的回調(diào)函數(shù)，其中data是收到的數(shù)據(jù)。
在上面的例子中，我們發(fā)送了news事件和收到了other event事件，那么客戶端應(yīng)該會有對應(yīng)的接收和發(fā)送事件。沒錯，客戶端代碼和服務(wù)器正好相反，而且非常相似。
Client（client.js）
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('other event', { my: 'data' });
});
</script>
有兩點要注意的：socket.io.js路徑要寫對，這個js文件實際放在了服務(wù)器端的node_modules文件夾中，在請求這個文件時會重定向，因此不要詫異服務(wù)器端不存在這個文件但為什么還能正常工作。當(dāng)然，你可以把服務(wù)器端的socket.io.js這個文件拷貝到本地，使它成為客戶端的js文件，這樣就不用每次都向Node服務(wù)器請求這個js文件，增強穩(wěn)定性。第二點是要用var socket = io.connect('網(wǎng)站地址或ip');來獲取socket對象，接著就可以使用socket來收發(fā)事件。關(guān)于事件處理，上面的代碼表示收到“news”事件后，打印收到的數(shù)據(jù)，并向服務(wù)器發(fā)送“other event”事件。
注：內(nèi)置默認(rèn)的事件名例如“disconnect”表示客戶端連接斷開，“message”表示收到消息等等。自定義的事件名稱，盡量不要跟Socket.IO中內(nèi)置的默認(rèn)事件名重名，以免造成不必要的麻煩。
4. 其他常用API
1).向所有客戶端廣播：socket.broadcast.emit('broadcast message');
2).進(jìn)入一個房間（非常好用！相當(dāng)于一個命名空間，可以對一個特定的房間廣播而不影響在其他房間或不在房間的客戶端）：socket.join('your room name');
3).向一個房間廣播消息（發(fā)送者收不到消息）：socket.broadcast.to('your room name').emit('broadcast room message');
4).向一個房間廣播消息（包括發(fā)送者都能收到消息）（這個API屬于io.sockets）：io.sockets.in('another room name').emit('broadcast room message');
5).強制使用WebSocket通信：（客戶端）socket.send('hi')，（服務(wù)器）用socket.on('message', function(data){})來接收。
5. 使用Socket.IO構(gòu)建一個聊天室
最后，我們通過一個簡單的實例來結(jié)束本篇。用Socket.IO構(gòu)建一個聊天室就是50行左右的代碼的事情，實時聊天效果也非常好。以下貼出關(guān)鍵代碼：
Server（socketChat.js）
//一個客戶端連接的字典，當(dāng)一個客戶端連接到服務(wù)器時，
//會產(chǎn)生一個唯一的socketId，該字典保存socketId到用戶信息（昵稱等）的映射
var connectionList = {};
exports.startChat = function (io) {
io.sockets.on('connection', function (socket) {
//客戶端連接時，保存socketId和用戶名
var socketId = socket.id;
connectionList[socketId] = {
socket: socket
};
//用戶進(jìn)入聊天室事件，向其他在線用戶廣播其用戶名
socket.on('join', function (data) {
socket.broadcast.emit('broadcast_join', data);
connectionList[socketId].username = data.username;
});
//用戶離開聊天室事件，向其他在線用戶廣播其離開
socket.on('disconnect', function () {
if (connectionList[socketId].username) {
socket.broadcast.emit('broadcast_quit', {
username: connectionList[socketId].username
});
}
delete connectionList[socketId];
});
//用戶發(fā)言事件，向其他在線用戶廣播其發(fā)言內(nèi)容
socket.on('say', function (data) {
socket.broadcast.emit('broadcast_say',{
username: connectionList[socketId].username,
text: data.text
});
});
})
};
Client(socketChatClient.js)
var socket = io.connect('http://localhost');
//連接服務(wù)器完畢后，馬上提交一個“加入”事件，把自己的用戶名告訴別人
socket.emit('join', {
username: 'Username hehe'
});
//收到加入聊天室廣播后，顯示消息
socket.on('broadcast_join', function (data) {
console.log(data.username + '加入了聊天室');
});
//收到離開聊天室廣播后，顯示消息
socket.on('broadcast_quit', function(data) {
console.log(data.username + '離開了聊天室');
});
//收到別人發(fā)送的消息后，顯示消息
socket.on('broadcast_say', function(data) {
console.log(data.username + '說: ' + data.text);
});
//這里我們假設(shè)有一個文本框textarea和一個發(fā)送按鈕.btn-send
//使用jQuery綁定事件
$('.btn-send').click(function(e) {
//獲取文本框的文本
var text = $('textarea').val();
//提交一個say事件，服務(wù)器收到就會廣播
socket.emit('say', {
username: 'Username hehe'
text: text
});
});
這就是一個簡單的聊天室DEMO，你可以根據(jù)你的需要隨意擴展。Socket.IO基本上就是各種事件的提交和接收處理，思想非常簡單。
相關(guān)文章
最近在使用mongoose的時候發(fā)現(xiàn)了一個之前一直沒注意的知識點，下面這篇文章主要給大家介紹了關(guān)于mongoose更新對象的兩種方法，通過示例代碼將兩種方法進(jìn)行詳細(xì)的對比，以給大家更好的參考學(xué)習(xí)，需要的朋友可以參考下。2017-12-12
利用node.js爬取指定排名網(wǎng)站的JS引用庫詳解
最近在學(xué)習(xí)node.js爬蟲，由于 nodejs 強大的異步特性，讓我們可以輕松以異步高并發(fā)去爬取網(wǎng)站，下面這篇文章主要給大家介紹了關(guān)于利用node.js爬取指定排名網(wǎng)站的JS引用庫的相關(guān)資料，需要的朋友可以參考下。2017-07-07
TJ自我介紹： TJ Holowaychuk ，程序員兼藝術(shù)家，Koa、Co、Express、jade、mocha、node-canvas、commander.js等知名開源項目的創(chuàng)建和貢獻(xiàn)者。2014-07-07
當(dāng)我們想要更改一下所有的文件,如何可以在修改到這些文件的同時又能實現(xiàn)節(jié)省時間呢,通過這篇文章我們將來學(xué)習(xí)一下怎么通過這個腳本來實現(xiàn)這個功能,希望對大家有所幫助2023-11-11
這篇文章主要介紹了node.js中 redis 的安裝和基本操作,結(jié)合實例形式分析了node.js中Redis下載、安裝、數(shù)據(jù)類型及基本操作技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解在Node.js中發(fā)起HTTP請求的5種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了Node.js 進(jìn)程平滑離場剖析小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Windows8下搭建Node.js開發(fā)環(huán)境教程
這篇文章主要介紹了Windows8下搭建Node.js開發(fā)環(huán)境教程,Win8下安裝node.js也比較簡單,只是一些權(quán)限比較麻煩,需要的朋友可以參考下2014-09-09
時下前端工程師有很多人比較關(guān)注NodeJs以及express 框架或者Koa 框架之類的新技術(shù)。難得我最近閑時較多，利用一下舊歷新年尚未正式到來的這片閑暇，也來涉足其中，一窺其中奧妙。2018-01-01
在?Node.js?的世界中,多線程技術(shù)一直是一個受到廣泛關(guān)注的領(lǐng)域,本文主要介紹了Node.js 多線程實戰(zhàn)小結(jié),具有一定的參考價值,感興趣的可以了解一下2024-01-01