我们今天的目标是使用Django, Node.js, Redis和Socket.IO创建一个实时在线聊天室。虽然使用其它技术也可以轻松创建类似于聊天室的应用, 本文将展示如何把无状态的REST app(关于REST概念, 请自行google之)变为实时交互的web app, 我将用Django来创建REST部分, 你也可以使用任何你熟悉的语言和web框架来代替，闲话少说, 代码先上，对了，在上代码之前，我们有以下东东需要安装。

安装

• Django 1.4+
• Redis 2.6.x (somewhat optional, but recommended)
• Redis-py 2.7.x (only needed if you're using Redis)
• Node.js v0.8.x
• Socket.IO v0.9.x
• Cookie v0.0.5
• Some sort of database or sqlite if you consider that a database

你可能已经安装了别的版本，尝试一下看可不可行，只不过我接下来的代码没有对其它版本的安装进行过测试。要是你对上面的技术一无所知，这有一个快速在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

Django 工程

让我们从这里开始吧。

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

好了，现在工程的目录结构已经出来了，让我们更新settings文件以便把数据库包含进来。如果你还没创建空白的数据库的话，现在请先创建一个。这里有一个我的settings.py以供参考。我添加了"core"这个app到INSTALLED_APPS配置里，同时配置好了urls和模板路径。你的设置不必跟我一模一样，但请注意要把必要的app都放在INSTALLED_APPS内。

模型(Model)

这个Model非常简单，只有两个属性，一个是user关联到用户，另外一个text是用户的发言。如果你想添加更多的属性，比如跟聊天室相关的，也是可以，但我这里为了紧扣主题，只简单设计了两个属性。

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)

接下来通过syncdb来把Model对应的表创建到数据库中，同时你可以建几个用户以备后用。

python manage.py syncdb
python manage.py createsuperuser

用Socket.IO创建Node服务

这部份开始，我们就进入激动人心的实时发送和接收消息编码了。我们先用Node.js来建立服务端，然后Socket.IO和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();
 
//Subscribe to the Redis chat channel
sub.subscribe('chat');
 
//Configure socket.io to store cookie set by Django
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) {
    
    //Grab message from Redis and send to client
    sub.on('message', function(channel, message){
        socket.send(message);
    });
    
    //Client is sending message through 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
            }
        };
        
        //Send message to Django server
        var req = http.get(options, function(res){
            res.setEncoding('utf8');
            
            //Print out error message
            res.on('data', function(message){
                if(message != 'Everything worked :)'){
                    console.log('Message: ' + message);
                }
            });
        });
        
        req.write(values);
        req.end();
    });
});

在上面的代码中，我们创建了一个端口为4000的http服务，然后我们订阅Redis的"chat"频道。我们可以简单地把这称之为"rabblerabble"(这词真难翻译啊，大致是不停地重复的意思?）, 像在Django的View里的发布端一样。

然后我们设置Socket.IO, 让它可以使用Django所配置的cookie，通过socket.handshake.cookie['the_key_we_want']来访问Django的cookie。这是我们怎么获取用户session的手段。

完成以上步骤之后，我们可以处理一些事件了。第一个事件关于Redis pubsub channel的。当订阅者(subscriber)发现有新消息，把新消息发送给所有网站上的客户端。

另外一个事件是通过Socket.IO发送消息。我们使用querystring创建一个查询并发送给Django服务。在本例中，Django服务运行在3000端口上，你也可以任意你想要的端口。路径是/node_api（接下来我们会在Django urls里配置这个地址）。我们朝这个地址发送querystring，Django应该保存并返回"Everything worked :)"，若没有，请检查Node输出的错误日志以解决。

一定要用Redis吗？

在本工程中如果你不想使用Redis，是完全可行的，我想使用它的原因是发现这样有助于学习。如果你不想使用Redis作为路由，可以使用类似Express这样的库。在上面的代码中实现了这么一个功能: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>

在JavaScript客户端代码中，我们先用Socket.IO连接Node服务（本例是localhost的4000端口）。从服务端得到内容后，解码并呈现在消息列表里。发送消息时只要在输入框里按下回车键，服务器收到之后先保存，然后触发"message"事件。

底部的"comments"变量来自我们在下一步要创建Django的视图输出，第一次加载页面的时候循环输出列表，以后新的消息每次从Node服务获取并叠加之。

The View(Django的View，好像没有规范的中文叫法，“视图”？)

打开realtime_tutorial/core/views.py并粘帖代码：

from core.models import Comments, User
 
from django.shortcuts import render
from django.http import HttpResponse, HttpResponseServerError
from django.views.decorators.csrf import csrf_exempt
from django.contrib.sessions.models import Session
from django.contrib.auth.decorators import login_required
 
import redis
 
@login_required
def home(request):
    comments = Comments.objects.select_related().all()[0:100]
    return render(request, 'index.html', locals())
 
@csrf_exempt
def node_api(request):
    try:
        #Get User from sessionid
        session = Session.objects.get(session_key=request.POST.get('sessionid'))
        user_id = session.get_decoded().get('_auth_user_id')
        user = User.objects.get(id=user_id)
 
        #Create comment
        Comments.objects.create(user=user, text=request.POST.get('comment'))
        
        #Once comment has been created post it to the chat channel
        r = redis.StrictRedis(host='localhost', port=6379, db=0)
        r.publish('chat', user.username + ': ' + request.POST.get('comment'))
        
        return HttpResponse("Everything worked :)")
    except Exception, e:
        return HttpResponseServerError(str(e))

让我们看下这个文件里的View都干了些什么。"home" 是一个标准的view, 我在初始化的时候就使用select_related在读取comment时同时把用户名(username)也取出来，而不是每读取一个comment对象时再去读取单个用户，减少数据库交互次数(有关这方面的知识，更详细请参考这里)。

第二个view是用来接收Node app发送的数据的。我们从POST的数据中获取用户的sessionid，并通过它得到用户id，一旦验证用户通过便可以创建comment了。现在可以发送用户名和comment给Redis服务了。我们把这些数据发送到之前命名为"chat"的pubsub channel。

urls配置

简单起见，登录登出我们都使用了Django内置的view，并且对应使用了Django框架内置的admin登录界面模板。

from django.conf.urls import patterns, include, url
 
urlpatterns = patterns('',
    url(r'^$', 'core.views.home', name='home'),
    url(r'^node_api$', 'core.views.node_api', name='node_api'),
    url(r'^login/$', 'django.contrib.auth.views.login', {'template_name': 'admin/login.html'}, name='login'),
    url(r'^logout/$', 'django.contrib.auth.views.logout', {'next_page': '/'}, name='logout'),
)

启动之

好了，万事具备，只欠启动命令。在终端输入以下命令启动以下服务，在启动Node的命令前面那行注释的意思是，在启动Django之后，你要另外打开一个终端窗口来启动Node：

python manage.py runserver localhost:3000
 
#In a new terminal tab cd into the nodejs directory we created earlier
node chat.js

我已经把源码放在github上面方便你使用，如果你有兴趣的话，可以扩展用户自己创建/加入聊天室等功能。你还可以无视Django用别的后台比如PHP或者Rails来代替。

你要有任何建议或者意见，请留下评论或直接联系我。