HTML5-WebSocket技术学习(2)

上一篇介绍了websocket的基本用法.这篇介绍websocket的一个框架: socket.io

socket.io是一个既可以用在客户端又可以用在服务器端的框架. 本篇介绍socket.io在客户端和node后端的基本用法

首先进入项目的根目录,然后执行 npm install socket.io

客户端:

1.链入socket.io.js:

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="socket.io/socket.io.js"></script>

特别注意,不需要创建一个文件夹socket.io,再在里面放入socket.io.js这个文件.

只要在根目录下在npm install socket.io,就可以了.上面两种写法都ok,但是不可以写 src="socket.io.js"

2.创建一个连接:

var iosocket = io.connect();

3.连接事件:

iosocket.on('connect',function(e){...})

4.接收到数据事件:

iosocket.on('message',function(data){
   console.log(data) 
})

data就是接收到的数据

5.断开连接事件:

iosocket.on('disconnect', function(e){...});

6.向服务器端发送数据:

iosocket.send(data)

data就是要发送的数据

服务器端:

1.获取socket.io模块:

var socketio = require('socket.io')

2.创建一个服务端:

var server = http.createServer(function(req, res) {
  ...
}).listen(3000, function() {
  console.log('Listening at: http://localhost:3000');
});

3.创建服务器端对应的socket:

var io = socketio(server);

4.连接,收发数据:

io.on('connection',function(socket){
    socket.on('message',function(data){
        console.log('Message Received: ', data);
        socket.broadcast.emit('message', data);
    })
});

下面举个完整的实例,模拟两人聊天:

index.html:

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  <script type="text/javascript" src="http://cdnimg.ocj.com.cn/common/js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="socket.io/socket.io.js"></script>
  <style>
    .bunny {
      color:#AF4442
    }
    .cat {
      color:#3170A9
    }
  </style>
  <script>
    $(function(){

      var name;

      $('#myName').keypress(function(event) {
        if(event.which == 13) {
          event.preventDefault();
          name = $(this).val();
          var myname = $('<p><span class="label label-default">'+name+'</span></p>');
          $(this).parent('.form-group').before(myname);
          $(this).parent('.form-group').remove();

        }
      });

      var iosocket = io.connect();

      iosocket.on('connect', function () {
        $('.container').prepend($('<div class="alert alert-success" role="alert">已连接</div>'));
      });

      iosocket.on('message', function(message) {
        var messages = message.split(';');
        $('#incomingChatMessages').append($('<li class='+messages[0]+'></li>').text(messages[0]+' say:'+messages[1]));
      });

      iosocket.on('disconnect', function() {
        $('.container').prepend($('<div class="alert alert-danger" role="alert">已断开</div>'));
      });

      $('#outgoingChatMessage').keypress(function(event) {
        if(event.which == 13) {
          event.preventDefault();
          iosocket.send(name+';'+$('#outgoingChatMessage').val());
          $('#incomingChatMessages').append($('<li class='+name+'></li>').text(name+' say:'+$('#outgoingChatMessage').val()));
          $('#outgoingChatMessage').val('');
        }
      });
    });
  </script>
</head>
<body>
<div class="container">

  Incoming Chat:&nbsp;<ul id="incomingChatMessages"></ul>
  <br />
  <div class="form-group">
    <label for="myName">name:</label>
    <input type="text" class="form-control" id="myName" placeholder="Enter Your Name">
  </div>
  <div class="form-group">
    <label for="outgoingChatMessage">enter:</label>
    <input type="text" class="form-control" id="outgoingChatMessage" placeholder="Enter info">
  </div>
</div>

</body>
</html>

分析:

1.创建一个name变量,用于保存用户输入的昵称.在这里都是虚假数据,所以只能输入cat,或者bunny(因为定义的样式是这两个类名),其中,cat发送的消息是蓝色的,bunny发送的消息是红色的.

2.先输入用户名,保存当前用户名(相当于聊天中的登录)

3.创建socket

4.连接成功的时候,显示提示"已连接"

5.接收数据成功的时候,把接收到的对方发送的消息插入到聊天对话中

6.按回车键发送消息,把自己发送的消息也插入到聊天对话中

7.连接断开的时候,显示提示"已断开"

app.js:

var fs = require('fs')
    , http = require('http')
    , socketio = require('socket.io');

var server = http.createServer(function(req, res) {
  res.writeHead(200, { 'Content-type': 'text/html'});
  res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(3000, function() {
  console.log('Listening at: http://localhost:3000');
});

var io = socketio(server);
io.on('connection',function(socket){
    socket.on('message',function(data){
        console.log('Message Received: ', data);
        socket.broadcast.emit('message', data);
    })
});

分析:

1.获取socket.io模块

2.创建服务器端,读取index.html内容.

3.创建socket.io的实例,传入server

4.监听connection事件,添加回调

5.监听message事件,添加回调,把接收到的信息再发出去

这个demo运行以后大概是这样的:

打开一个火狐,一个chrome:

分别输入用户名,cat和bunny:

输入用户名后:

然后就猫猫和兔兔就可以开始聊天啦~~

今天就到这里,socket.io还有很多api,很多其他用法,以后会不断深入研究~~~

完整代码:https://github.com/OOP-Code-Bunny/html5/tree/master/nodeWebsocket