使用Node.js和Socket.IO扩展Django的实时处理功能

 今天，我们的目标是使用Django，Redis，和Socket.IO建立一个实时的聊天室。虽然几乎所有的Web应用程序都可以建立一个聊天室的。这篇文章将以较高的水平告诉你如何将基于REST的应用程序转换成一个实时的Web应用程序的。我会使用Django创建REST的部分，实际上自由地使用任何你舒服的语言/框架均可。接下来，让我们跳进代码，先列举我们所需要的部分。

组成：

•     Django 1.4+
•     Redis 2.6.x (版本可选，但是建议使用)
•     Redis-py 2.7.x (仅当你使用Redis时需要)
•     Node.js v0.8.x
•     Socket.IO v0.9.x
•     Cookie v0.0.5
•     数据库、sqlite、其他你觉得类似数据库形式的 均可

 

你的使用的版本可能与我不同，我暂时未测试其他版本，全部使用当前最新稳定版本。如果你无法通过下面方法安装，我已经编译好Ubuntu的软件包。你可以从评论中得到其他操作系统版本情况。
 

#https://docs.djangoproject.com/en/dev/topics/install/
sudo apt-get install python-pip
sudo pip install django
 
#http://redis.io/download
sudo apt-get install redis-server
 
#https://github.com/andymccurdy/redis-py
sudo pip install redis  
   
#https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager
sudo apt-get install python-software-properties
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
 
#https://github.com/LearnBoost/socket.io
npm install socket.io
 
#https://github.com/shtylman/node-cookie
npm install cookie

</div>

让我们从Django Project开始
 

django-admin.py startproject realtime_tutorial && cd realtime_tutorial
python manage.py startapp core
mkdir nodejs

</div>

执行完以上的代码，django project就配置好了，接下来要做的是在settings文件中设置数据库。先创建一个空白数据库。（这是一个settings file的例子。在我的app中添加了一个“core”然后配置templates和urls的路径。你可以随意更改settings中的配置信息，但是要与你的app相对应。

Model

models很简单，我们将要建一个包含user和text的表。如果你想让他更复杂一些，可以添加chatroom等信息。（为了简单起见，这里只写了两个）
 

from django.db import models
from django.contrib.auth.models import User
 
class Comments(models.Model):
  user = models.ForeignKey(User)
  text = models.CharField(max_length=255)

</div>

这就是我们将要使用的model，接下来执行下面的syncdb代码（第一行代码），创建数据库。然后创建几个user来测试。（第二行代码）

python manage.py syncdb
python manage.py createsuperuser
 
Node Server With Socket.IO

</div>

这一部分将要介绍实时信息的发送和获取。使用Node.js创建一个依赖Socket.IO的app server，使用Redis 来做这项苦差事。在nodejs字典中，创建一个叫做“chat.js”的文件，然后把它放在这里：
 

var http = require('http');
var server = http.createServer().listen(4000);
var io = require('socket.io').listen(server);
var cookie_reader = require('cookie');
var querystring = require('querystring');
 
var redis = require('socket.io/node_modules/redis');
var sub = redis.createClient();

 
//订阅chat channel


sub.subscribe('chat');

 
//配置socket.io来存储Django设置的cookie
io.configure(function(){
  io.set('authorization', function(data, accept){
    if(data.headers.cookie){
      data.cookie = cookie_reader.parse(data.headers.cookie);
      return accept(null, true);
    }
    return accept('error', false);
  });
  io.set('log level', 1);
});
 
io.sockets.on('connection', function (socket) {
   
  //把信息从Redis发送到客户端
  sub.on('message', function(channel, message){
    socket.send(message);
  });
   
  //客户端通过socket.io发送消息
  socket.on('send_message', function (message) {
    values = querystring.stringify({
      comment: message,
      sessionid: socket.handshake.cookie['sessionid'],
    });
     
    var options = {
      host: 'localhost',
      port: 3000,
      path: '/node_api',
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Content-Length': values.length
      }
    };
     
    //使用Django server发消息
    var req = http.get(options, function(res){
      res.setEncoding('utf8');
       
      //输出错误信息
      res.on('data', function(message){
        if(message != 'Everything worked :)'){
          console.log('Message: ' + message);
        }
      });
    });
     
    req.write(values);
    req.end();
  });
});

</div> 首先，我们导入并创建http server来监听localhost 4000端口。然后订阅Redis的 "chat" chanel。最后，只要我们在Django view中调用就可以了。</div>

上次我们设置了Socket.IO能在本地领域使用cookie的那个Django设置，这能让我们通过socket.handshake.cookie去访问cookie数据。能让我们怎样得到用户的session会话。

我们设置Socket.IO的cookies之后我们才能持有很多事件，第一个事件是Redis 发布通道，当我们的用户注意到一个新的消息已经被通知它将发送消息给所有站点的客户端。

另一个事件是当客户端通过Socket.IO发送一个信息，我们使用字符串查询(queryString)模块去创建一个query查询才能被发送到我们的Django服务。我们的Django服务在本地端口3000将会运行但你能改变了那个需求。路径设置成/node_api那个URL我们将不久创建在Django旁边。一旦我们发送queryString我们等待的Django就会保存相关组件并给我们返回"Everything worked(都在工作）"。如果我们没有得到返回给我们的输出错误就关闭节点控制台

一个关于不使用Redis的节点

你真的完全没必要为这项目使用Redis，我发现它将是一个好的学习体验，如果你想分流Redis你可以创建一个通道，使用表达式或一些其它类库，在这上面的代码会从Django里接收一个消息当一个注释被保存时，然后你能通过Socket.IO添加注释给所有的客户端
模板

这就是我们所有HTML和javascript被放置的地方，它允许我们显示注释和交互我们的Node服务
 

<!DOCTYPE html>
<html>
<head>
 <title>Realtime Django</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://localhost:4000/socket.io/socket.io.js"></script>
 <script>
  $(document).ready(function(){
   var socket = io.connect('localhost', {port: 4000});
    
   socket.on('connect', function(){
    console.log("connect");
   });
    
   var entry_el = $('#comment');
        
   socket.on('message', function(message) {
    //Escape HTML characters
    var data = message.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
     
    //Append message to the bottom of the list
    $('#comments').append('<li>' + data + '</li>');
    window.scrollBy(0, 10000000000);
    entry_el.focus();
   });
           
   entry_el.keypress(function(event){
    //When enter is pressed send input value to node server
    if(event.keyCode != 13) return;
    var msg = entry_el.attr('value');
    if(msg){
      socket.emit('send_message', msg, function(data){
        console.log(data);
      });
     
    //Clear input value 
    entry_el.attr('value', '');
    }
   });
  });
 </script>
</head>
<body>
  <ul id="comments">
    {% for comment in comments %}
      <li>{{comment.user}}: {{comment.text}}</li>
    {% endfor %}
  </ul>
  <input type="text" id="comment" name="comment" />
</body>
</html>

</div>

在上面