Node.js+socket.io实现实时通信

前两天公司组织HTML5培训，在培训上介绍了Node.js，感觉挺好，回来学习了一下，用Node.js搭建网络服务器，使用socket.io实现网络实时通信。代码很简单，但是在研究过程中遇到了各种问题。在各路大神的帮助下得以解决，特此鸣谢。

首先要安装Node.js（至于Node.js是什么，百度一下，说的老详细了）。

我的操作系统是XP和Win7都可以安装的。

登录Node.js的官方网站下载：http://www.nodejs.org/，点击download按钮

然后点击下载最新的windows版本，之后安装就可以了（我安在了C盘下）。

之后是搭建网络服务器（很简单的）：

在node.js的安装目录先建一个js文件，命名为server.js

在server.js里编写如下代码：

View Code 
1 var http = require("http");
2 
3 http.createServer(function(request, response) {
4   response.writeHead(200, {"Content-Type": "text/plain"});
5   response.write("Hello World");
6   response.end();
7 }).listen(8888);

启动服务器，测试一次代码：

这个图片代表我们的网络服务器搭建成功了。

下面我们要搭建socket.io网络通信。

首先要安装socket.io，在命令行下输入 npm install socket.io 

自动运行安装。

socket.io网络通信是搭在网络服务器上的。关于socket.io网络通信基本操作请查看官网的说明（很详细的）http://socket.io/#how-to-use

我的代码经过了小小的改良

服务端代码：

View Code 
 1 var app = require('http').createServer(handler)
 2   , io = require('socket.io').listen(app)
 3   , fs = require('fs')
 4 
 5 app.listen(80);
 6 
 7 function handler (req, res) {
 8   fs.readFile(__dirname + '/index.html',
 9   function (err, data) {
10     if (err) {
11       res.writeHead(500);
12       return res.end('Error loading index.html');
13     }
14 
15     res.writeHead(200);
16     res.end(data);
17   });
18 }
19 io.sockets.on('connection', function (socket) {
20   socket.emit('news', { hello: 'world' });
21   socket.on('my other event', function (data) {
22     console.log(data);
23   });
24   socket.on("message", function(data) {  
25         socket.send("Hello " + data);  
26     });  
27    
28     socket.on("disconnect", function() {  
29         console.log("disconnected");  
30     });
31 });

客户端代码：index.html

View Code 
 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4           <script src="http://localhost:80/socket.io/socket.io.js"></script>
 5         <script>
 6           var socket = io.connect('http://localhost');
 7           socket.on('news', function (data) {
 8             console.log(data);
 9             socket.emit('my other event', { my: 'data' });
10           });
11           socket.on("message", function(data){   
12                 console.log("received message: " + data);  
13                 document.getElementById("message").innerHTML = data;  
14             });  
15           socket.on("disconnect", function(){   
16                 console.log("disconnected");    
17             })  
18    
19           function send() {  
20                 var name = document.querySelector("input[name=name]").value;  
21                 console.log("send message: " + name);  
22                 socket.send(name);  
23             }
24         </script>
25     </head>  
26     <body>
27         <label for="name">What's your name:</label>  
28         <input type="text" id="name" name="name" />  
29         <button onClick="send()">Send</button>  
30         <div id="message" style="color: red"></div>
31     </body>  
32 </html>

 

先运行服务端：node server.js

在浏览器中打开客户端，就可以操作了。

我是在chrom浏览器下运行的客户端：

在客户端提交在服务端显示

posted on 2013-04-02 21:03  Roc.Sun  阅读(2650)  评论(1)  编辑  收藏  举报

导航