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

介绍

Real-time应用程序是当前Web开发的热门议题之一，它能够让你在没有任何延迟的情况下与你的用户进行实时的通信。 Node.js和Socket.IO是两个非常流行的工具，能够让你轻松地在Django应用程序中实现实时功能。本文将演示如何使用Node.js和Socket.IO扩展Django的实时处理功能，让你的应用程序更具交互性和响应性。

需求

Python 3.6.4
Django >= 2.1.2
node.js
socket.io

步骤

1. 安装和配置Node.js

首先，你需要安装Node.js运行环境。如果你已经安装了Node.js，请跳过此步骤。否则，可以通过以下网站下载并安装Node.js：https://nodejs.org

安装完成后，在终端中输入以下指令检查是否成功安装：

    node -v

如果你看到了类似“v10.15.3”的版本号，那么Node.js已经成功安装了。

2. 安装socket.io

安装socket.io需要使用Node.js包管理工具npm。在终端中输入以下指令来安装socket.io：

    npm install --save socket.io

这会安装socket.io并将其添加到项目的依赖列表中。

3. 创建Node.js服务器

在项目的根目录下创建一个名为server.js的文件，这个文件将包含我们的Node.js服务器。在文件中写入以下代码：

    const io = require("socket.io")(3000);

    io.on("connection", socket => {

        console.log("New client connected");

        socket.on("disconnect", () => {
            console.log("Client disconnected");
        });

    })

这个代码将使用socket.io创建一个服务器，监听3000端口。服务会在有新客户端连接时输出日志，并在有客户端断开连接时输出日志。

4. 完成server.js配置

还需要添加如下代码在server.js中调用socket.io：

    const io = require("socket.io")(3000);

    io.on("connection", socket => {

        console.log("New client connected");

        socket.on("send_message", (message) => {
            console.log(message);

            io.emit("message_received", message);
        });

        socket.on("disconnect", () => {
            console.log("Client disconnected");
        });

    });

io.emit("message_received", message);语句会让socket.io将“message_received”消息发送给所有的客户端。这个代码将会在接受到“send_message”消息，也就是用户提交了一个消息时触发。

5. 更新Django视图

接下来，我们需要将socket.io集成到Django应用程序中。打开Django视图文件，在文件头部添加以下代码：

    from django.shortcuts import render
    from django.http import HttpResponse
    import socketio

    sio = socketio.Server(async_mode='threading')
    app = socketio.WSGIApp(sio)

这头代码中，我们导入了socketio并创建了一个名为sio的服务器。然后，我们创建了一个名为app的WSGI应用，该应用使用sio作为服务器。

接下来，我们将socket.io服务器的路由配置到Django应用程序中：

    from django.shortcuts import render
    from django.http import HttpResponse
    import socketio

    sio = socketio.Server(async_mode='threading')
    app = socketio.WSGIApp(sio)

    def index(request):
        return render(request, "index.html")

    def socketio(request):
        if request.method == "GET":
            return HttpResponse("")
        elif request.method == "POST":
            sio.emit("message_received", request.body)
            return HttpResponse("")

在Django中，我们可以使用urlconf来将socket.io路由到我们刚才创建的视图：

    from django.urls import path
    from .views import index, socketio


    urlpatterns = [
        path("", index),
        path("socket.io/", socketio),
    ]

6. 使用Soket.io调用Django视图

最后，我们需要使用socket.io在Django视图中调用后端的函数。在JavaScript文件中添加以下代码：

    const socket = io("http://localhost:3000");

    socket.on("connect", () => {
        console.log("Connected");
    });

    socket.on("message_received", message => {
        console.log(message);
    });

    document.getElementById("message-form").addEventListener("submit", event => {
        event.preventDefault();

        const messageInput = document.getElementById("message-input");

        const message = messageInput.value;

        messageInput.value = "";

        socket.emit("send_message", message);
    });

这个代码将会让我们的前端静态页面连接到socket.io服务器，并触发一个监听器来接受来自服务器的消息。

示例

接下来我们使用Twitter Stream API和Node.js扩展Django的实时处理功能。这个功能会让我们实时监测Twitter的流并在有新信息时向客户端发送数据。

1. 连接Twitter Streaming API

首先，我们需要在Node.js中连接Twitter API，要使用Twitter API，你需要先创建一个Twitter开发者帐号并获取API密钥等信息。在终端中执行以下命令安装相关包：

    npm install --save twitter

然后，我们需要在server.js中添加如下代码以连接Twitter API：

    const Twitter = require("twitter");
    const credentials = require("./config/credentials.json")

    const client = new Twitter(credentials);

    client.stream("statuses/filter", {track: "#javascript, #python"}, stream => {
        stream.on("data", (tweet) => {
            io.emit("tweetReceived", tweet);
        });
        stream.on("error", (error) => {
            console.log(error);
        });
        stream.on("end", (error) => {
            console.log(error);
        });
    });

这个代码将连接到Twitter Streaming API并监听“statuses/filter”流。在监听器中，我们将每个接收到的推文发送到客户端，使用“tweetReceived”消息将推特数据传递给客户端。

2. 客户端监听

我们需要在客户端的JavaScript代码中添加一个监听器来监听来自服务器的推文数据。在JavaScript文件中添加以下代码：

    const socket = io("http://localhost:3000");

    socket.on("connect", () => {
        console.log("Connected");
    });

    socket.on("tweetReceived", tweet => {
        const tweetBody = document.createElement("p");
        tweetBody.textContent = tweet.text;
        document.body.appendChild(tweetBody);
    });

这个代码在客户端连接socket.io服务器后开始监听“tweetReceived”消息。这个消息被触发时，数据将会被呈现在客户端，使用一个p标签渲染推文文本。