使用WebSocket
在客戶端使用websocket需要建立WebSocket物件，通過提供的open、send、message、close等方法實現建立、傳送、監聽資訊、關閉連線。例如下面的程式碼：
if('WebSocket' in window){
// 建立websocket例項
var socket = new WebSocket('ws://localhost:8080');
//開啟
socket.onopen = function(event) {
// 傳送
socket.send('I am the client and I\'m listening!');
// 監聽
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// 關閉監聽
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 關閉
//socket.close()
};
}else{
alert('本瀏覽器不支援WebSocket哦~');
}現在chrome、firefox等瀏覽器都已經支援了websocket，而IE卻沒有。下面我們來簡單說說伺服器端對websocket的支援。
伺服器端支援websocket的語言不少，而且都有相關的開源專案，例如php的phpwebsockets：http://code.google.com/p/phpwebsockets/，java的jWebsocket：http://jwebsocket.org/。
更多的資訊可以瀏覽這篇文章：Start Using HTML5 WebSockets Today
socket.io
socket.IO是一個websocket庫，包括了客戶端的js和伺服器端的nodejs。官方地址：http://socket.io
客戶端使用socket.io
去github clone socket.io的最新版本，或者直接飲用使用socket.io的CDN服務：
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
下面可以建立使用socket.io庫來建立客戶端js程式碼了：
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});socket.on是監聽，收到伺服器端發來的news的內容，則執行function，其中data就是請求回來的資料，socket.emit是傳送訊息給伺服器端的方法。
使用socket.io和nodejs搭建websocket伺服器端
socket.io不僅可以搭建客戶端的websocket服務，而且支援nodejs伺服器端的websocket。
nodejs安裝socket.io
使用node外掛管理包，執行下面的命令就可以安裝成功socket.io
npm install socket.io沒有npm的或者windows使用者可以使用github下載socket.io並且放入到node_modules資料夾中，具體配置可以參考文章：《nodejs教程：配置nodejs.exe的windows目錄結構》
nodejs建立socket.io服務
通過nodejs的http模組就可以方便的搭建websocket伺服器環境，例如下面的程式碼：
// 引入需要的模組：http和socket.io
var http = require('http'), io = require('socket.io');
//建立server
var 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>');
});
//埠8000
server.listen(8080);
//建立socket
var socket = io.listen(server);
//新增連線監聽
socket.on('connection', function(client){
//連線成功則執行下面的監聽
client.on('message',function(event){
console.log('Received message from client!',event);
});
//斷開連線callback
client.on('disconnect',function(){
console.log('Server has disconnected');
});
});儲存為socket.js然後在命令列執行：node socket.js 即可啟動伺服器，現在訪問localhost:8000就可以了。
使用express和socket.io
前篇文章我提到了nodejs的web框架：express，下面的程式碼就可以建立一個基於express和socket.io的socket應用：
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) {
//傳送訊息給客戶端 socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
//廣播資訊給除當前使用者之外的使用者
socket.broadcast.emit('user connected');
//廣播給全體客戶端
io.sockets.emit('all users');
});和客戶端的方法一樣，socket.io的監聽都是使用on方法，傳送使用emit方法。另外提供了廣播功能：broadcast
寫在最後
最近寫文章比較勤，主要是怕自己十一放假回來頭緒就亂了，所以在十一之前整理出來最近胡亂學習nodejs的一些心得體會，國內的nodejs資料太少了，學習成本挺高的。
前天晚上寫的一個基於express+socket.io的聊天室已經放到了網上，歡迎大家下載測試。
下篇文章可能要寫在express和socket.io中實現session認證。因為上面的聊天室用到了session判斷使用者是否登入。另外自己寫了個nodejs的鬥地主，可是邏輯相當的複雜，於是程式碼也就越寫越爛，寫到最後測試邏輯就開始混淆，有空還要整理下才能放出來哦~省的拿出去丟人。羞愧啊~
來源：http://www.js8.in/784.html
評論(3)