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: <
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/ 地址開始互聊了。