前段时间接触到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连接的指定上面有所不同，需要注意的就是页面的各种外部文件的引用形式问题，只要引用得当应该就通了 ，有问题看控制台调试一下也就可以了。