socket.io和node.js搭建即時通訊系統簡答介紹

螞蟻小編發表於2017-03-27
Node.js

使用socket.io和nodejs搭建websocket伺服器端

socket.io不僅可以搭建客戶端的websocket服務，而且支援nodejs伺服器端的websocket。

下面讓我來介紹一下怎麼安裝配置nodejs.

進入http://nodejs.org/#download下載msi檔案。一直點next安裝。最後檔案會自動安裝在C:\nodejs目錄下。

安裝完成後，會自動配置環境環境變數。如果沒有自動配置，自己手動在path處加上 ;C:\nodejs\。

安裝完成後，需要配置npm來管理node.js的模組。

在window下安裝npm需要安裝git。

安裝完git後，開啟gitbush。執行下面幾步:

[JavaScript] 純文字檢視 複製程式碼
git config --system http.sslcainfo /bin/curl-ca-bundle.crt
 
git clone --recursive git://github.com/isaacs/npm.git
 
cd npm
 
node cli.js install npm -gf

第一個是設定不會有任何提示,第二步會到github上下載npm會有下載檔案和進度,第四步是安裝npm到node.js會複製幾個檔案cmd檔案和mode_modules資料夾到nodejs目錄。

這樣就配置好了npm。

如果需要安裝什麼模組直接輸入npm install ***。

沒有npm的或者windows使用者可以使用github下載socket.io並且放入到node_modules資料夾中，具體配置可以參考文章：《nodejs教程：配置nodejs.exe的windows目錄結構》

nodejs安裝socket.io

使用node外掛管理包，執行下面的命令就可以安裝成功socket.io

[JavaScript] 純文字檢視 複製程式碼
npm install socket.io

用socket.io 實現的一個例子

客戶端程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="../js/socket.io.client.js"></script> 
<script type="text/javascript"> 
function doit(){ 
  var socket = io.connect('http://localhost'); 
  socket.on('news', function (data) {//接收到伺服器傳送過來的名為'new'的資料 
    console.log(data.hello);//data為應伺服器傳送過來的資料。 
    socket.emit('my new event', { my:'new data' });//向伺服器傳送資料，實現雙向資料傳輸 
  }); 
 
  socket.on('other',function(data){//接收另一個名為'other'資料， 
    console.log(data.hello); 
    socket.emit('event1', { my:'other data' }); 
  }); 
} 
window.onload=function(){
  var obt=document.getElementById("btn");
  obt.onclick=function(){
    doit()
  }
}
</script> 
</head> 
<body> 
<button id='btn'>click me</button> 
</body> 
</html>

socket.io.client.js可以https://github.com/LearnBoost/socket.io-client下載到本地，在<script src="..">指向本機的js庫。

伺服器用nodejs實現

server2.js

[JavaScript] 純文字檢視 複製程式碼
var http= require('http'), io= require('socket.io'), express= require('express'); 
var app = express.createServer(), io = io.listen(app); 
app.listen(80); 
io.sockets.on('connection', function (socket) { 
 //監聽，一旦客戶端連線上，即傳送資料，第一個引數'new'為資料名，第二個引數既為資料 
 socket.emit('news', { hello: 'world' });
 //捕獲客戶端傳送名為'my other event'的資料 
 socket.on('my other event', function (data) {
   console.log(data.my); 
 }); 
 socket.emit('other', { hello: 'other world' });//傳送另一個資料 
 socket.on('evnet1', function (data) {//捕獲另外一個資料 
  console.log(data.my); 
 }); 
});

測試結果，客戶端可正常顯示

伺服器端顯示結果：

C:\java\Nodejs>node server2.js

注：程式碼要和npm_module在同一個目錄下。不然會出現找不到socket.io module的錯誤。

相關文章