基於node的webSocket應用


html推出了webSocket。因為畢業設計要用到聊天室的功能,所以就研究了下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哦~');
}
Socket.Io是個JavaScript框架,包括服務器端和客戶端,使用統一的API封裝了各種實時連接(如WebSocket、Flash Socket、AJAX長輪詢等),使得后端的連接可以對開發人員透明。
Socket.IO使用檢測功能來判斷是否建立WebSocket連接,或者是AJAX long-polling連接,或Flash等。可快速創建實時的應用程序。
Socket.IO可以從GitHub下載,可以把socket.io.js文件包含到頁面中:
CODE: <script src="http://cdn.socket.io/stable/socket.io.js"></script>
[/code
 此時,Socket.IO在此頁面上是有效的,是時候創建Socket了: [code] // 創建Socket.IO實例,建立連接
var socket= new io.Socket('localhost',{ port: 8080 }); socket.connect(); // 添加一個連接監聽器
socket.on('connect',function() { console.log('Client has connected to the server!'); }); // 添加一個連接監聽器
socket.on('message',function(data) { console.log('Received a message from the server!',data); }); // 添加一個關閉連接的監聽器
socket.on('disconnect',function() { console.log('The client has disconnected!'); }); // 通過Socket發送一條消息到服務器
function sendMessageToServer(message) { socket.send(message); }
Socket.IO簡化了WebSocket API,統一了返回運輸的API。傳輸包括:
WebSocket
Flash Socket
AJAX long-polling
AJAX multipart streaming
IFrame
JSONP polling
你還可以設置任意的Socket.IO構造器的第二個選項,選項包括:
port - 待連接的端口
transports - 一個數組,包含不同的傳輸類型
transportOptions - 傳輸的參數使用的對象,帶附加屬性
Socket.IO還提供了由本地WebSocket API提供的普通連接、斷開連接、消息事件。Socket還提供了封裝每個事件類型的方法。

客戶端使用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不僅可以搭建客戶端的websocket服務,而且支持nodejs服務器端的websocket。

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

npm install socket.io

關於如何配置npm見前一篇文章

通過nodejs的http模塊就可以方便的搭建websocket服務器環境,例如下面的代碼:

server端:
var  http = require('http')
    , socketio = require('socket.io');
 
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    console.log('Listening at: http://localhost:8080');
});
//添加一個連接監聽器
socketio.listen(server).on('connection', function (client) {
    //監聽成功
    client.on('message', function (msg) {
        console.log('Message Received: ', msg);
           client.send('message', msg);
    });
    client.on("disconnect", function() {
        console.log("Server has disconnected");
    })
});

client端:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    
</head>
<body>
Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
<script>
        $(function(){
            var iosocket = io.connect();
 
            iosocket.on('connect', function () {
                $('#incomingChatMessages').append($('<li>Connected</li>'));
 
                iosocket.on('message', function(message) {
                    $('#incomingChatMessages').append($('<li></li>').text(message));
                });
                iosocket.on('disconnect', function() {
                    $('#incomingChatMessages').append('<li>Disconnected</li>');
                });
            });
 
            $('#outgoingChatMessage').keypress(function(event) {
                if(event.which == 13) {
                    event.preventDefault();
                    iosocket.send($('#outgoingChatMessage').val());
                    $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
                    $('#outgoingChatMessage').val('');
                }
            });
        });
    </script>
</html>
把服務端代碼保存為socket.js然后在命令行執行:node socket.js 即可啟動服務器,用瀏覽器打開兩個頁面就可以測試了。
注:代碼要和npm_module在同一個目錄下。不然會出現找不到socket.io module的錯誤。
 
         


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM