Django+Vue实现WebSocket连接的示例代码

近期有一个项目需求，前端页面需要点击执行任务并实时显示后端执行情况。在考虑如何实现这一功能时，WebSocket 成为了最佳的选择。接下来，我将为大家展示如何使用 Django 和 Vue 实现 WebSocket 连接，并通过示例代码详细介绍。

一、效果展示

我们来实现一个简单的效果：测试 ping .baidu 的响应，并通过点击连接建立 WebSocket 连接。

二、后端实现

为了实现这一功能，后端主要借助 Django Channels 来实现 socket 连接。为了实现对每个连接进行分组广播，我们还需要引入 channels-redis。

以下是所需软件包的安装：

pip install channels==2.2.0 channels-redis==2.4.0

接下来，我们进行配置和代码实现。

1. 在 Django 的 settings.py 文件中进行配置：

在 INSTALLED_APPS 中添加 'channels'，并配置 Redis 主机和端口。配置 CHANNEL_LAYERS，指定使用 channels_redis 作为后端存储。

2. 创建消费者（consumers）

在 apps 目录下创建 consumers.py 文件，并定义一个名为 MyConsumer 的消费者类。在 connect 方法中，我们将每个任务作为一个频道，并将连接的频道名称添加到对应的任务执行频道组。在 disconnect 方法中，我们将连接的频道名称从任务执行频道组中移除。job_message 方法用于处理接收到的消息，并发送回复。

3. 创建路由（routing）

在 apps 目录下创建 routing.py 文件，并定义 WebSocket 路由。将路径为 ws/job/{job_name} 的请求由 MyConsumer 处理。

在`views.py`文件中，我们引入了消费者和Django的URL路径配置，同时集成了Channels的路由和会话中间件。这是为了构建一个强大的WebSocket应用，它可以接收并处理实时的数据交互。

我们的核心应用是通过`ProtocolTypeRouter`来定义的，它负责处理不同类型的协议，这里我们主要处理的是WebSocket协议。对于WebSocket连接，我们使用了会话中间件堆栈`SessionMiddlewareStack`来增强功能，比如支持会话管理。

在URL路由部分，我们定义了一个路径模式`'ws/job/'`，这个路径会匹配到我们的消费者`MyConsumer`。当客户端尝试建立WebSocket连接并发送包含任务名称的消息时，就会触发这个消费者进行处理。

我们的应用还采用了异步推送技术。这是因为我们在连接阶段使用的是异步连接，为了保证数据的实时性和流畅性，推送过程也需要是异步的。这意味着我们可以更高效地处理大量的并发连接和实时数据交互。

在处理长时间运行的任务时，我们采用了多线程的方式。这样可以避免阻塞主线程，提高系统的整体性能。当任务启动时，我们会立即返回"ok"给客户端，然后在后台继续运行任务。这种方式可以大大提高系统的响应速度和用户体验。

让我们从Python后端开始。你的代码已经很好地使用了`subprocess`模块来执行shell脚本，并通过线程运行。我们可以稍微调整一下描述，使其更加生动。

```python

from subprocess import Popen, PIPE

import threading

import os

def execute_command(job):

"""启动并监控脚本执行过程"""

path = os.path.abspath(os.path.join(BASE_DIR, os.path.pardir)) 获取上级目录的绝对路径

script_path = os.path.abspath(os.path.join(path, 'run.sh')) 获取脚本的绝对路径

cmd = f"sh {script_path} {job}" 构建命令字符串

process = Popen(cmd, shell=True, stdout=PIPE, stderr=PIPE) 执行命令

while True: 持续监控输出和错误流

output = process.stdout.readline() 读取输出数据

if output == '' and process.poll() is not None: 如果进程结束且无输出，跳出循环

break

if output: 处理输出数据

output_text = str(output.strip()) 去除首尾空格并转为字符串格式

channel_layer = get_channel_layer() 获取频道层实例

group_name = f"job_{job}" 创建任务组名

async_to_sync(channel_layer.group_send)(group_name, {"type": "job.message", "text": output_text}) 向任务组发送消息

else: 处理错误数据

err = process.stderr.readline() 读取错误数据

err_text = str(err.strip()) 转换为字符串格式并去除首尾空格

async_to_sync(channel_layer.group_send)(group_name, {"type": "job.message", "text": err_text}) 向任务组发送错误信息并退出循环

break 结束进程监控循环并退出函数处理错误消息发送完毕之后结束循环和线程，处理错误信息发送完毕之后结束循环和线程（代码省略）class StartJob(APIView):

[前端界面互动体验优化]

在用户界面上，我们有两个主要按钮：“执行”和“显示”。用户可以点击“执行”按钮来触发某项功能，并通过WebSocket实时查看后端返回的消息。而“显示”按钮则用于展示WebSocket的通信内容。这样的设计增强了用户体验，使得前后端的交互更加流畅。

[代码逻辑梳理与功能解读]

在代码逻辑上，我们首先在`data`中定义了`webSocket`连接对象和`socketMessage`消息数组，用于存储后端返回的数据。在方法中，我们定义了连接WebSocket、监听消息、转码以及执行请求等函数。其中，`openSocket`和`listenSocket`分别处理连接建立和收到消息时的情况。当连接建立时，我们会弹出一个提示通知用户连接已成功建立；当收到后端返回的消息时，我们会将其添加到消息数组中，并在界面上显示。

[后端交互体验优化]

在执行方法`runFunction`中，我们通过向后端发送请求来触发某项功能。如果后端返回错误，我们会提示用户具体的错误码；如果返回“ok”，则表示功能已成功触发，并告知用户正在执行的功能ID。这样的设计使得用户能够清晰地了解交互的状态和结果。

[技术细节解读]

在这段代码中，我们使用了axios进行HTTP请求，使用WebSocket进行实时通信。通过WebSocket的开放、消息和关闭事件，我们可以实现与后端的双向通信。我们还使用了Vue的指令和插件来增强用户体验和简化开发过程。这些技术的应用使得前后端的交互更加流畅和高效。

[结语与展望]

至此，我们已经实现了前后端WebSocket通信的功能，并优化了用户体验。这只是一个开始，我们还可以进一步更多优化和改进的方法。例如，我们可以考虑添加更多的交互元素和动画效果来提升用户体验；我们还可以考虑使用更多的前端技术来优化开发过程和性能。希望这篇文章能为大家的学习提供帮助，也希望大家多多支持我们的工作。未来，我们将继续为大家带来更多有价值的内容和技术分享。让我们共同期待未来的技术发展和创新！