【socket.io研究】2.小试牛刀

1.建立个项目，也就是文件夹，这里使用testsocket

2.创建文件package.json，用于描述项目：

{ 
    "name":"testsocket", 
    "version":"0.0.1", 
    "description":"my first nodejs app", 
    "dependencies":{ 
        "express":"~4.10.2",, 
        "socket.io":"~1.2.0" 
    } 
}

3.创建index.js

var app = require('express')();

//Express初始化变量app，作为方法应用于http服务 
var http = require('http').Server(app); 
var io = require('socket.io')(http);

//定义一个路由方法'/'用作我们访问网站首页的返回结果

app.get('/', function(req, res){ 
    res.sendFile(__dirname + '/index.html'); 
    console.log('new link:', req); 
});

io.on('connection', function(socket){ 
    socket.on('chat message', function(msg){ 
        io.emit('chat message', msg); 
        console.log('message: ' + msg); 
    }); 
});

//监听服务器3000端口

http.listen(3000, function(){ 
    console.log('listening on *:3000'); 
});

4.创建index.html

<!doctype html> 
<html> 
  <head> 
    <title>Socket.IO chat</title> 
    <style> 
      * { margin: 0; padding: 0; box-sizing: border-box; } 
      body { font: 13px Helvetica, Arial; } 
      form { background: #000; padding: 3px; position: fixed; bottom: 0;  100%; } 
      form input { border: 0; padding: 10px;  90%; margin-right: .5%; } 
      form button {  9%; background: rgb(130, 224, 255); border: none; padding: 10px; } 
      #messages { list-style-type: none; margin: 0; padding: 0; } 
      #messages li { padding: 5px 10px; } 
      #messages li:nth-child(odd) { background: #eee; } 
    </style> 
  </head> 
  <body> 
    <ul id="messages"></ul> 
    <form action=""> 
      <input id="m" autocomplete="off" /><button>Send</button> 
    </form> 
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> 
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
    <script> 
      var myid = Math.floor(Math.random() * 100) + 1; 
      var socket = io('/'); 
      
      $('form').submit(function(){ 
        socket.emit('chat message', myid + ' says: ' + $('#m').val()); 
        $('#m').val(''); 
        return false; 
      }); 
      
      socket.on('chat message', function(msg){ 
        $('#messages').append($('<li>').text(msg)); 
      }); 
      
    </script> 
  </body> 
</html>

5.执行

安装：

npm install –save express

npm install –save socket.io

node index.js

浏览器中访问127.0.0.1:3000

6.先实现这些功能再说其他的东西吧

demo下载地址：http://files.cnblogs.com/files/renyuzhuo/testsocket.zip