Socket.IO 和 Node.js 入门


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

相关内容