您當(dāng)前位置：首頁 > web前端 > jscript > 使用socket.io和node.js搭建websocket應(yīng)用

使用socket.io和node.js搭建websocket應(yīng)用

來源：程序員人生發(fā)布時間：2013-11-24 22:56:03 閱讀次數(shù)：3413次

websocket是HTML5的一種新的通信協(xié)議，它是實現(xiàn)了瀏覽器與服務(wù)器的雙向通訊。在 WebSocket API 中，瀏覽器和服務(wù)器只需要要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。
關(guān)于websocket的更多信息，請移步維基百科

使用WebSocket

在客戶端使用websocket需要創(chuàng)建WebSocket對象，通過提供的open、send、message、close等方法實現(xiàn)創(chuàng)建、發(fā)送、監(jiān)聽信息、關(guān)閉連接。例如下面的代碼：

if('WebSocket' in window){	// 創(chuàng)建websocket實例	var socket = new WebSocket('ws://localhost:8080');	//打開	socket.onopen = function(event) {	  // 發(fā)送	  socket.send('I am the client and I'm listening!');	  // 監(jiān)聽	  socket.onmessage = function(event) {		console.log('Client received a message',event);	  };	  // 關(guān)閉監(jiān)聽	  socket.onclose = function(event) {		console.log('Client notified socket has closed',event);	  };	  // 關(guān)閉	  //socket.close()	};}else{	alert('本瀏覽器不支持WebSocket哦~');}

現(xiàn)在chrome、firefox等瀏覽器都已經(jīng)支持了websocket，而IE卻沒有。下面我們來簡單說說服務(wù)器端對websocket的支持。

服務(wù)器端支持websocket的語言不少，而且都有相關(guān)的開源項目，例如php的phpwebsockets：http://code.google.com/p/phpwebsockets/，java的jWebsocket：http://jwebsocket.org/。
更多的信息可以瀏覽這篇文章：Start Using HTML5 WebSockets Today

socket.io

socket.IO是一個websocket庫，包括了客戶端的js和服務(wù)器端的nodejs。官方地址：http://socket.io

客戶端使用socket.io

去github clone socket.io的最新版本，或者直接飲用使用socket.io的CDN服務(wù)：

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

下面可以創(chuàng)建使用socket.io庫來創(chuàng)建客戶端js代碼了：

var socket = io.connect('http://localhost');socket.on('news', function (data) {	console.log(data);	socket.emit('my other event', { my: 'data' });});

socket.on是監(jiān)聽，收到服務(wù)器端發(fā)來的news的內(nèi)容，則運行function，其中data就是請求回來的數(shù)據(jù)，socket.emit是發(fā)送消息給服務(wù)器端的方法。

使用socket.io和nodejs搭建websocket服務(wù)器端

socket.io不僅可以搭建客戶端的websocket服務(wù)，而且支持nodejs服務(wù)器端的websocket。

nodejs安裝socket.io

使用node插件管理包，運行下面的命令就可以安裝成功socket.io

npm install socket.io

沒有npm的或者windows用戶可以使用github下載socket.io并且放入到node_modules文件夾中，具體配置可以參考文章：《nodejs教程：配置nodejs.exe的windows目錄結(jié)構(gòu)》

nodejs建立socket.io服務(wù)

通過nodejs的http模塊就可以方便的搭建websocket服務(wù)器環(huán)境，例如下面的代碼：

// 引入需要的模塊：http和socket.iovar http = require('http'), io = require('socket.io');//創(chuàng)建servervar server = http.createServer(function(req, res){   // Send HTML headers and message  res.writeHead(200,{ 'Content-Type': 'text/html' });   res.end('<h1>Hello Socket Lover!</h1>');});//端口8000server.listen(8080);//創(chuàng)建socketvar socket = io.listen(server);//添加連接監(jiān)聽socket.on('connection', function(client){   	//連接成功則執(zhí)行下面的監(jiān)聽	client.on('message',function(event){ 		console.log('Received message from client!',event);	});	//斷開連接callback	client.on('disconnect',function(){		console.log('Server has disconnected');	});});

保存為socket.js然后在命令行執(zhí)行：node socket.js 即可啟動服務(wù)器，現(xiàn)在訪問localhost:8000就可以了。

使用express和socket.io

前篇文章我提到了nodejs的web框架：express，下面的代碼就可以創(chuàng)建一個基于express和socket.io的socket應(yīng)用：

var app = require('express').createServer(), 	io = require('socket.io').listen(app);app.listen(80);app.get('/', function (req, res) {	res.sendfile(__dirname + '/index.html');});io.sockets.on('connection', function (socket) {	//發(fā)送消息給客戶端	socket.emit('news', { hello: 'world' });	socket.on('my other event', function (data) {		console.log(data);	});	//廣播信息給除當(dāng)前用戶之外的用戶	socket.broadcast.emit('user connected');	//廣播給全體客戶端	io.sockets.emit('all users');});

和客戶端的方法一樣，socket.io的監(jiān)聽都是使用on方法，發(fā)送使用emit方法。另外提供了廣播功能：broadcast

寫在最后

最近寫文章比較勤，主要是怕自己十一放假回來頭緒就亂了，所以在十一之前整理出來最近胡亂學(xué)習(xí)nodejs的一些心得體會，國內(nèi)的nodejs資料太少了，學(xué)習(xí)成本挺高的。
前天晚上寫的一個基于express+socket.io的聊天室已經(jīng)放到了網(wǎng)上，歡迎大家下載測試。

下篇文章可能要寫在express和socket.io中實現(xiàn)session認證。因為上面的聊天室用到了session判斷用戶是否登錄。另外自己寫了個nodejs的斗地主，可是邏輯相當(dāng)?shù)膹?fù)雜，于是代碼也就越寫越爛，寫到最后測試邏輯就開始混淆，有空還要整理下才能放出來哦~省的拿出去丟人。羞愧啊~

來源：http://www.js8.in/784.html

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生