歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> Socket.IO 和 Node.js 入門

Socket.IO 和 Node.js 入門

日期:2017/3/1 10:22:51   编辑:Linux編程

Node.js 並不能做所有事情,但它可通過 Socket.IO 庫輕松實現 WebSockets。使用 WebSockets 可輕松構建實時多用戶的應用程序或游戲,今天我們將講述如何使用 Node.js 和 Socket.IO 構建簡單的聊天程序。

注意: 在閱讀文章之前你應該先安裝好 Node.js,同時你需要一個自己喜歡的文本編輯器,本文提及的一些源碼有些改自 http://book.mixu.net/ch13.html

下面我們開始入門教程:

首先在你的電腦上創建一個新目錄,姑且命名為 chat,然後在該目錄創建兩個文件,分別是 app.js 和 index.html。

app.js 文件內容如下:

01 var fs = require('fs') 02 , http = require('http') 03 , socketio = require('socket.io'); 04 05 var server = http.createServer(function(req, res) { 06 res.writeHead(200, { 'Content-type': 'text/html'}); 07 res.end(fs.readFileSync(__dirname + '/index.html')); 08 }).listen(8080, function() { 09 console.log('Listening at: http://localhost:8080'); 10 }); 11 12 socketio.listen(server).on('connection', function (socket) { 13 socket.on('message', function (msg) { 14 console.log('Message Received: ', msg); 15 socket.broadcast.emit('message', msg); 16 }); 17 });

上述代碼是一個超級簡單的聊天服務器的實現,該服務器發送 index.html 並偵聽所有 WebSockets 請求,如果你發送一個 hi 的聊天信息,格式如下:

1 {"name":"message","args":["hi"]}

index.html 頁面代碼如下:

01 <html> 02 <head> 03 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 04 <script src="/socket.io/socket.io.js"></script> 05 <script> 06 $(function(){ 07 var iosocket = io.connect(); 08 09 iosocket.on('connect', function () { 10 $('#incomingChatMessages').append($('<li>Connected</li>')); 11 12 iosocket.on('message', function(message) { 13 $('#incomingChatMessages').append($('<li></li>').text(message)); 14 }); 15 iosocket.on('disconnect', function() { 16 $('#incomingChatMessages').append('<li>Disconnected</li>'); 17 }); 18 }); 19 20 $('#outgoingChatMessage').keypress(function(event) { 21 if(event.which == 13) { 22 event.preventDefault(); 23 iosocket.send($('#outgoingChatMessage').val()); 24 $('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val())); 25 $('#outgoingChatMessage').val(''); 26 } 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul> 33 <br /> 34 <input type="text" id="outgoingChatMessage"> 35 </body> 36 </html>

該頁面雖然不怎麼吸引人,但是可正常工作。接下來打開兩個浏覽器,必須得是支持 WebSockets 的浏覽器,例如 Chrome 或者 Safari。

下一步就是安裝 Socket.IO 了,可在命令行窗口中執行如下命令:

1 $ npm install socket.io

然後運行 app.js 文件:

1 $ node app.js

現在你可以打開兩個浏覽器,訪問 http://localhost:8080/ 地址開始互聊了。

Copyright © Linux教程網 All Rights Reserved