socket.io使用初体验

　　前段时间接触到websocket + nodejs，由于websocket对于安卓的兼容并不好，工作中遇到了需要兼容安卓的问题，所以，对socket.io进行了一番尝试。由于对后台知识了解不多，所以学起来也是摸索着前进。

　　这里就不多做解释了，直接放出代码。

　　1.资源全部放在服务器端，本地通过ip和端口来访问：

　　 

 1 app.js
 2 
 3 var http= require('http'), io= require('socket.io');  
 4 var fs = require('fs'); 
 5 function onreq(req,res){
 6  res.writeHead(200, {"Content-Type": "text/html"});
 7  res.end(fs.readFileSync(__dirname + '/index.html'));
 8 }
 9 
10 var app = http.createServer(onreq), io = io.listen(app);  
11 
12 app.listen(8080); 
13  
14 
15 io.sockets.on('connection', function(socket){ 
16   socket.emit('news', { hello: 'hello' });
17  
18 });
19 console.log('Is listening 8080');

 

　　

 1 index.html
 2 
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>socket io Demo</title>
 8 <style>
 9 body{
10     margin:0;
11     padding:0;
12 
13 }
14 #box{
15     margin-right:10px;
16    　　 border-radius: 5px;
17    　　 border: 2px solid lightblue;
18     height:18px;
19    　　 width:147px;
20     padding-left:5px;
21     color:hotpink;
22 }
23 
24 </style>
25 <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
26 <script src="/socket.io/socket.io.js"></script>
27 
28 </head>
29 <body>
30 <h1></h1>
31 <div id="box"></div>
32 <input type="text" id="inp" placeholder="请输入名字" />
33 <button id="click" >click</button>
34 
35  <script>
36 
37 $(function(){
38 
39         socket = io.connect();
40         
41             socket.on('news', function (data) {
42                $('#click').click(function(){ 
43                        var inpt = $('#inp').val();
44                $('#box').html( data.hello + ',' + inpt);
45                });
46     
47 
48 
49 });    
50 
51 </script>
52 </body>
53 </html>

 

　　2.页面放本地，通过指定ip和端口来连接服务器：

　　

 1 app.js
 2 
 3 var http = require("http");
 4 var io= require('socket.io'); 
 5 var server = http.createServer(function(request, response){
 6     response.writeHead(200,{"Content-Type":"text/html"});
 7     response.write("Socket Start.");
 8     response.end("");
 9 }).listen(8080);
10  
11 var socket= io.listen(server); 
12  
13 socket.on('connection', function(socket){ 
14   socket.emit('news', { hello: 'hello' });
15     
16   
17 });
18 console.log('Is listening 8080');

　　

 1 index.html
 2 
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>socket io Demo</title>
 8 <style>
 9 body{
10     margin:0;
11     padding:0;
12 
13 }
14 #box{
15     margin-right:10px;
16    　　 border-radius: 5px;
17    　　 border: 2px solid lightblue;
18     height:18px;
19     　　width:147px;
20     padding-left:5px;
21     color:hotpink;
22 }
23 
24 </style>
25 <script src="js/jquery-1.11.1.min.js"></script>
26 <script src="http://ip + port/socket.io/socket.io.js"></script>
27 
28 </head>
29 <body>
30 <h1></h1>
31 <div id="box"></div>
32 <input type="text" id="inp" placeholder="请输入名字" />
33 <button id="click" >click</button>
34 
35  <script>
36 
37 $(function(){
38 
39             socket = io.connect("http://ip + port");
40         
41                          socket.on('news', function (data) {
42             $('#click').click(function(){ 
43                      var inpt = $('#inp').val();
44             $('#box').html( data.hello + ',' + inpt);
45                });
46 
47             });
48 
49  
50 
51  
52 
53 
54 
55 });    
56 
57 </script>
58 </body>
59 </html>

 

　　demo很简单，点击按钮时将服务器发过来的hello和输入框中输入的字符连接起来放到id为box的div中显示出来。两种方式大同小异，不过是在文件引用的路径和socket连接的指定上面有所不同，需要注意的就是页面的各种外部文件的引用形式问题，只要引用得当应该就通了 ，有问题看控制台调试一下也就可以了。

posted @ 2014-08-12 14:11  杜偉  阅读(397)  评论(0)  编辑  收藏  举报