Django+Vue WebSocket实战：实时显示后端任务执行进度

本文将介绍如何使用Django和Vue.js框架来实现WebSocket连接，以便在前端页面上实时显示后端任务的执行情况。通过WebSocket，可以实现双向通信，确保前端能够即时获取到后端的任务更新。 ### Django后端实现 在Django中，我们依赖于`Django Channels`库来处理WebSocket连接。首先，确保安装了必要的软件包： ```bash pip install channels==2.2.0 pip install channels-redis==2.4.0 ``` 在`settings.py`中，我们需要将`channels`添加到`INSTALLED_APPS`列表中，并配置`CHANNEL_LAYERS`以使用Redis作为中间件： ```python INSTALLED_APPS = [ # ... 'channels', ] # Redis配置 REDIS_HOST = ENV_DICT.get('REDIS_HOST', '127.0.0.1') REDIS_PORT = ENV_DICT.get('REDIS_PORT', 6379) CHANNEL_LAYERS = { "default": { "BACKEND": "channels_redis.core.RedisChannelLayer", "CONFIG": { "hosts": [(REDIS_HOST, REDIS_PORT)], }, }, } ``` 接着，创建一个名为`consumers.py`的文件，通常放在`apps`目录下，定义WebSocket消费者类。这个类会处理连接、断开连接以及接收和发送消息： ```python from channels.generic.websocket import WebsocketConsumer class MyConsumer(WebsocketConsumer): def connect(self): # 每个任务作为一个频道 self.job_name = self.scope['url_route']['kwargs']['job_name'] self.join_group(self.job_name) def disconnect(self, close_code): self.leave_group(self.job_name) def receive(self, text_data): # 处理接收到的消息并广播给组内所有成员 text_data_json = json.loads(text_data) message = text_data_json['message'] self.send(text_data=json.dumps({ 'message': message })) ``` ### Vue.js前端实现 在前端，我们需要使用Vue.js来创建一个WebSocket连接。首先，在Vue组件中初始化WebSocket连接，并监听连接状态变化以及接收消息： ```javascript <template> <button @click="connect">建立连接</button> <div v-for="msg in messages" :key="msg.id">{{ msg }}</div> </template> <script> export default { data() { return { messages: [], socket: null, jobName: 'your_job_name', // 与后端的job_name匹配 }; }, methods: { connect() { this.socket = new WebSocket(`ws://your_server_url/ws/${this.jobName}/`); this.socket.onopen = this.handleOpen; this.socket.onclose = this.handleClose; this.socket.onmessage = this.handleMessage; }, handleOpen() { console.log('WebSocket连接已建立'); }, handleClose(event) { console.log('WebSocket连接已关闭', event); }, handleMessage(event) { const message = JSON.parse(event.data); this.messages.push(message.message); }, sendMessage(message) { this.socket.send(JSON.stringify({ message })); }, }, }; </script> ``` ### 总结 通过以上步骤，我们就构建了一个基础的Django+Vue WebSocket应用，实现了前端页面点击按钮后建立连接，并能实时显示后端任务执行情况。当后端有新的任务更新时，可以通过WebSocket将消息推送给前端，从而达到实时通信的效果。需要注意的是，实际项目中可能需要处理更多细节，如错误处理、连接重试、安全验证等。