node.js中的Socket.IO使用實(shí)例
1. 簡介
首先是Socket.IO的官方網(wǎng)站：http://socket.io
官網(wǎng)非常簡潔，甚至沒有API文檔，只有一個(gè)簡單的“How to use”可以參考。因?yàn)镾ocket.IO就跟官網(wǎng)一樣簡潔好用易上手。
那么Socket.IO到底是什么呢？Socket.IO是一個(gè)WebSocket庫，包括了客戶端的js和服務(wù)器端的nodejs，它的目標(biāo)是構(gòu)建可以在不同瀏覽器和移動設(shè)備上使用的實(shí)時(shí)應(yīng)用。它會自動根據(jù)瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實(shí)現(xiàn)網(wǎng)絡(luò)實(shí)時(shí)應(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是一個(gè)小巧的Node.js的Web應(yīng)用框架，在構(gòu)建HTTP服務(wù)器時(shí)經(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的時(shí)候，基本上都在這個(gè)回調(diào)函數(shù)里面處理用戶的請求。
socket最關(guān)鍵的是emit和on兩個(gè)函數(shù)，前者提交（發(fā)出）一個(gè)事件（事件名稱用字符串表示），事件名稱可以自定義，也有一些默認(rèn)的事件名稱，緊接著是一個(gè)對象，表示向該socket發(fā)送的內(nèi)容；后者接收一個(gè)事件（事件名稱用字符串表示），緊接著是收到事件調(diào)用的回調(diào)函數(shù)，其中data是收到的數(shù)據(jù)。
在上面的例子中，我們發(fā)送了news事件和收到了other event事件，那么客戶端應(yīng)該會有對應(yīng)的接收和發(fā)送事件。沒錯(cuò)，客戶端代碼和服務(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>
有兩點(diǎn)要注意的：socket.io.js路徑要寫對，這個(gè)js文件實(shí)際放在了服務(wù)器端的node_modules文件夾中，在請求這個(gè)文件時(shí)會重定向，因此不要詫異服務(wù)器端不存在這個(gè)文件但為什么還能正常工作。當(dāng)然，你可以把服務(wù)器端的socket.io.js這個(gè)文件拷貝到本地，使它成為客戶端的js文件，這樣就不用每次都向Node服務(wù)器請求這個(gè)js文件，增強(qiáng)穩(wěn)定性。第二點(diǎ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)入一個(gè)房間（非常好用！相當(dāng)于一個(gè)命名空間，可以對一個(gè)特定的房間廣播而不影響在其他房間或不在房間的客戶端）：socket.join('your room name');
3).向一個(gè)房間廣播消息（發(fā)送者收不到消息）：socket.broadcast.to('your room name').emit('broadcast room message');
4).向一個(gè)房間廣播消息（包括發(fā)送者都能收到消息）（這個(gè)API屬于io.sockets）：io.sockets.in('another room name').emit('broadcast room message');
5).強(qiáng)制使用WebSocket通信：（客戶端）socket.send('hi')，（服務(wù)器）用socket.on('message', function(data){})來接收。
5. 使用Socket.IO構(gòu)建一個(gè)聊天室
最后，我們通過一個(gè)簡單的實(shí)例來結(jié)束本篇。用Socket.IO構(gòu)建一個(gè)聊天室就是50行左右的代碼的事情，實(shí)時(shí)聊天效果也非常好。以下貼出關(guān)鍵代碼：
Server（socketChat.js）
//一個(gè)客戶端連接的字典，當(dāng)一個(gè)客戶端連接到服務(wù)器時(shí)，
//會產(chǎn)生一個(gè)唯一的socketId，該字典保存socketId到用戶信息（昵稱等）的映射
var connectionList = {};
exports.startChat = function (io) {
io.sockets.on('connection', function (socket) {
//客戶端連接時(shí)，保存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ù)器完畢后，馬上提交一個(gè)“加入”事件，把自己的用戶名告訴別人
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è)有一個(gè)文本框textarea和一個(gè)發(fā)送按鈕.btn-send
//使用jQuery綁定事件
$('.btn-send').click(function(e) {
//獲取文本框的文本
var text = $('textarea').val();
//提交一個(gè)say事件，服務(wù)器收到就會廣播
socket.emit('say', {
username: 'Username hehe'
text: text
});
});
這就是一個(gè)簡單的聊天室DEMO，你可以根據(jù)你的需要隨意擴(kuò)展。Socket.IO基本上就是各種事件的提交和接收處理，思想非常簡單。
相關(guān)文章
這篇文章主要介紹了Node對CommonJS的模塊規(guī)范，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
node.js中path路徑模塊的使用方法實(shí)例分析
這篇文章主要介紹了node.js中path路徑模塊的使用方法,結(jié)合實(shí)例形式分析了node.js path路徑模塊的基本功能、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
nodejs 簡單實(shí)現(xiàn)動態(tài)html的方法
今天小編就為大家分享一篇nodejs 簡單實(shí)現(xiàn)動態(tài)html的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05
利用node 判斷打開的是文件 還是 文件夾的實(shí)例
今天小編就為大家分享一篇利用node 判斷打開的是文件 還是 文件夾的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-06-06
本篇文章主要介紹了NodeJS收發(fā)GET和POST請求的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
nodejs mysql 實(shí)現(xiàn)分頁的方法
本篇文章主要介紹了nodejs mysql 實(shí)現(xiàn)分頁的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
Node.js 應(yīng)用跑得更快 10 個(gè)技巧
Node.js 受益于它的事件驅(qū)動和異步的特征，已經(jīng)很快了。本文將介紹 10 條，經(jīng)過檢驗(yàn)得知可大大提高 Node 應(yīng)用的技巧。廢話不多說，讓我們逐條來看看2016-04-04
這篇文章主要為大家介紹了Node.js中參數(shù)傳遞的兩種方式：GET方式和POST方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
nodejs如何獲取當(dāng)前連接的網(wǎng)絡(luò)ip
這篇文章主要介紹了nodejs如何獲取當(dāng)前連接的網(wǎng)絡(luò)ip問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了nodejs的基礎(chǔ)應(yīng)用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02