99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要為大家展示了“nodejs如何結(jié)合Socket.IO實(shí)現(xiàn)的即時通訊功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“nodejs如何結(jié)合Socket.IO實(shí)現(xiàn)的即時通訊功能”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站制作、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)密云免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了上千多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

具體如下：

動態(tài)web

在html5以前，web的設(shè)計(jì)上并沒有考慮過動態(tài)，他一直是圍繞著文檔設(shè)計(jì)的，我們看以前比較老的網(wǎng)站，基本上都是某一刻用來顯示單一的文檔的，用戶請求一次web頁面，獲取一個頁面，但是隨著時間的推移，人們想要web做更多的事情了，而不是簡單的要顯示文檔，而javaScript一直處于開發(fā)人員推動web頁面功能的發(fā)展中心。

Ajax無疑是動態(tài)Web頁面的一個重大發(fā)展，他不再需要我們即使更新一點(diǎn)內(nèi)容，也需要刷新整個頁面了，但是有些方面，又體現(xiàn)了他的不足。如果從服務(wù)器請求數(shù)據(jù)，他固然號，但是如果服務(wù)器想要將數(shù)據(jù)推送到瀏覽器呢。Ajax技術(shù)無法很容易的支持將數(shù)據(jù)推送到客戶，雖然可以，但是需要跨國很多的障礙才行，而且不同的瀏覽器工作方式也不同，例如IE和FireBox他們的內(nèi)核就不一樣，從而工作方式也不一樣。

WebSocket是在對服務(wù)器和客戶端之間實(shí)現(xiàn)雙向通信問題的相應(yīng)。他的思想是，從頭開始，設(shè)計(jì)一個開發(fā)人員可以使用的標(biāo)準(zhǔn)以便以一直的方式創(chuàng)建應(yīng)用程序，而不是通過復(fù)雜的，并不總能設(shè)置所有瀏覽器的工作。他的思想是Web服務(wù)器和瀏覽器之間保持持久打開，這就使得不管是服務(wù)器還是瀏覽器都可以在想要的時候推送數(shù)據(jù)。因?yàn)檫B接是持久的，所以數(shù)據(jù)的交換非常的快，也就成了實(shí)時的了。

Socket.IO

說了那么多，我們介紹一下正主，Socket.IO是Node.js的一個模塊，他提供通過WebSocket進(jìn)行通信的一種簡單方式，WebSocket協(xié)議很復(fù)雜，但是Socket.IO提供了服務(wù)器和客戶端雙方的組件，所以只需要一個模塊就可以給應(yīng)用程序加入對WebSocket的支持。而且還能支持不同的瀏覽器。

基礎(chǔ)的Socket.IO

Socket.IO既能在服務(wù)端也能在客戶端工作，要使用它，必須將其添加到服務(wù)器端的JavaScript(Node.js)和客戶端的JavaScript(JQuery)中，這是以為內(nèi)通信通常是雙向的，所以Sokcet.IO需要能在兩邊工作。

var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

而且必須將Socket.IO庫包含起來，才能加入Socket.IO的功能。

var io = require('socket.io').listen(server);

然后加入一個事件來響應(yīng)客戶端到底是連接了，還是斷開了。事件如下：

io.sockets.on('connection',function(socket){
  console.log('User connected');
  socket.on('disconnect',function(){
    console.log('User disconnected');
  });
});

是不是覺得非常的簡單，下面我們看一下完整的代碼實(shí)現(xiàn)是如何實(shí)現(xiàn)的吧：

簡單Socket.IO應(yīng)用

新建app.js

新建文件夾socket.io，在該文件夾下新建app.js，寫如下代碼：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  console.log('User connected');
  socket.on('disconnect',function(){
    console.log('User disconnected');
  });
});

新建index.html

新建index.html文件，代碼如下：

 
  
  
 
 
  
Socket.IO Example
  
  
 

新建package.json

新建package.json來引入模塊。

{
  "name":"socketio_example",
  "version":"4.13.2",
  "private":true,
  "dependencies":{
    "socket.io":"1.4.5"
  }
}

版本號大家可以輸入自己的nodejs -V，或者socket.io -v來查看自己的版本號。

運(yùn)行

如果大家沒有安裝Socket.IO，可以運(yùn)行如下代碼，如果安裝了，自動跳過這一步。

npm install socket.io

從終端運(yùn)行如下命令安裝模塊

npm install

運(yùn)行如下命令啟動服務(wù)器

node app.js

打開瀏覽器，輸入http://127.0.0.1:3000/，多打開幾個頁簽，都輸入該網(wǎng)址，再任意關(guān)閉一個頁簽，然后看看我們的cmd命令窗口是不是如下：

這里會詳細(xì)的記錄又多少個用于連接了，也有多少個用戶斷開連接了，這樣就能統(tǒng)計(jì)我們網(wǎng)頁的訪問量了。

從服務(wù)器發(fā)送數(shù)據(jù)到客戶端

上邊的實(shí)例我們已經(jīng)實(shí)現(xiàn)了連接或者斷開服務(wù)器做記錄了，但是我們要是想要推送消息怎么辦，例如我們好友的QQ上線了，騰訊都會咳嗽一下來提醒我們有好友上線。下面我們來做一下這個功能功能。

發(fā)送給單個用戶

io.sockets.on('connection',function(socket){
    socket.emit('message',{text:'你上線了'});
});

發(fā)給所有用戶

io.sockets.on('connection',function(socket){
    socket.broadcast.emit('message',{'你的好某XXX上線了'});
});

無論是發(fā)送給單個用戶還是所有用戶，這個message是自己寫的，但是要在客戶端用，所以命名要注意。

客戶端

在客戶端我們可以添加偵聽事件來接收數(shù)據(jù)。

var socket = io.connect('http://127.0.0.1:3000');
socket.on('message',function(data){
  alert(data.text);
})

通過這些功能，我們就在第一個例子的基礎(chǔ)上，實(shí)現(xiàn)用戶數(shù)量的統(tǒng)計(jì)。這里只需要在服務(wù)端設(shè)置一個變量，count,如果有一個上線，那么就數(shù)量+1，并通知所有用戶，最新的在線人數(shù)。

新建app.js

var http = require('http');
var fs = require('fs');
var count = 0;
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  count++;
  console.log('User connected' + count + 'user(s) present');
  socket.emit('users',{number:count});
  socket.broadcast.emit('users',{number:count});
  socket.on('disconnect',function(){
    count--;
    console.log('User disconnected');
    socket.broadcast.emit('users',{number:count});
  });
});

創(chuàng)建index.html文件

 
  
  
 
 
  
Socket.IO Example
  
How many users are here?
  

   
  
  
 

創(chuàng)建package.json文件

{
  "name":"socketio_example",
  "version":"4.13.2",
  "private":true,
  "dependencies":{
    "socket.io":"1.4.5"
  }
}

安裝模塊npm install

啟動服務(wù)器node app.js

打開瀏覽器，輸入http://127.0.0.1:3000,可以看到如下圖片：

再打開一個連接http://127.0.0.1:3000，可以看到如下結(jié)果：

可以看到如果我們打開兩個連接，那么兩個頁簽都會顯示當(dāng)前又兩個用戶在線，如果關(guān)閉其中一個，我們可以看到又顯示只有一個用戶在線。

將數(shù)據(jù)廣播給客戶端

接下來我們來看看Socket.IO是如何實(shí)現(xiàn)客戶端與客戶端的通信呢。
要想實(shí)現(xiàn)該功能，首先需要客戶端將消息發(fā)送到服務(wù)端，·然后服務(wù)端發(fā)送給除自己之外的其他客戶。服務(wù)器將消息發(fā)送給客戶端的方法在上一個例子中我們已經(jīng)實(shí)現(xiàn)了，那么我們需要的是客戶端把接收到的消息發(fā)送給服務(wù)器。

下邊的代碼思想是利用表單來實(shí)現(xiàn)的。

實(shí)現(xiàn)的思想是,將JQuery和SocketIO庫包含進(jìn)來，只是瀏覽器攔截127.0.0.1:3000的服務(wù)，使用Jquery的submit方法加入偵聽期，等候用戶提交表單。

發(fā)送消息給Socket>IO服務(wù)器，文本區(qū)域的內(nèi)容位消息發(fā)送。

添加return false ，防止表單在瀏覽器窗口提交。

在上邊已經(jīng)說過服務(wù)器如何廣播消息，下邊我們說一下客戶端如何顯示客戶端發(fā)送的消息。

socket.on('push message', function (data) {
  $('form').after('
' + data.text + '
');
})

實(shí)例實(shí)現(xiàn)

創(chuàng)建messaging的新文件夾

在文件夾下創(chuàng)建package.json文件，代碼如下：

{
  "name":"socketio_example",
  "version":"4.13.2",
  "private":true,
  "dependencies":{
    "socket.io":"1.4.5"
  }
}

創(chuàng)建app.js文件，代碼如下：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile('./index.html',function(error,data){
    res.writeHead(200,{'Content-Type':'text/html'});
    res.end(data,'utf-8');
  });
}).listen(3000,"127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
var io = require('socket.io').listen(server);
io.sockets.on('connection',function(socket){
  socket.on('message',function(data){
    socket.broadcast.emit('push message',data);
  });
});

創(chuàng)建index.html

 
  
  
 
 
  
Socket.IO Example
  
   
   
  
  
  
  
 

加載模塊npm install

啟動服務(wù)器node app.js

然后打開瀏覽器的多個頁簽，都輸入http://127.0.0.1:3000

可以看到我們再任何一個窗口輸入內(nèi)容，都會在其他的頁面顯示我們輸入的內(nèi)容，效果如下：

以上是“nodejs如何結(jié)合Socket.IO實(shí)現(xiàn)的即時通訊功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：nodejs如何結(jié)合Socket.IO實(shí)現(xiàn)的即時通訊功能
轉(zhuǎn)載注明：http://ef60e0e.cn/article/gphjeh.html