django-vue基于websocket人工客服系统打造

最新推荐文章于 2024-08-16 13:56:51 发布
最新推荐文章于 2024-08-16 13:56:51 发布
阅读量1.4k 收藏 13
点赞数 2
分类专栏： django 文章标签： websocket vue http 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45954124/article/details/113537744
版权

websocket已经讲过了有兴趣的可以戳这里

今天我们要做的就是基于websocket实时人工客服，先来了解一下机制

WebSocket 机制

WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯，它建立在 TCP 之上，同 HTTP 一样通过 TCP 来传输数据，但是它和 HTTP 最大不同是：

  • WebSocket 是一种双向通信协议，在建立连接后，WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据，就像 Socket 一样；
  • WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接，连接成功后才能相互通信。
  • 图 2.WebSocket 请求响应客户端服务器交互图

那我们知道可为什么要使用它了吧

django后端接口

表的设计

在这里插入图片描述

# 聊天表
class Chat(models.Model):
    user_id_a = models.IntegerField()
    user_id_b = models.IntegerField()

    class Meta:
        index_together = ['user_id_a', 'user_id_b']
        unique_together = ['user_id_a', 'user_id_b']
        # 联合索引要这样写入！！！！！！！！！
        db_table = '聊天表'


# 消息表
class Message(models.Model):
    name = models.CharField(max_length=32, null=True)
    message = models.CharField(max_length=132)
    chat = models.ForeignKey(Chat, on_delete=models.CASCADE)

    class Meta:
        db_table = '消息表'

views.py

from dwebsocket.decorators import accept_websocket
from .serializers import *
from .models import *


# 接收前端信息
@accept_websocket
def reception_socket(request):
    if request.is_websocket():
        for message in request.websocket:
            input_text = eval(str(message, encoding='utf-8'))
            username = input_text.get("username")
            uid = input_text.get("uid")
            input_text = input_text.get("inputText")
            try:
                chat = Chat.objects.create(user_id_a=uid, user_id_b=998)
                Message.objects.create(message=input_text, chat=chat, name=username)
            except:
                chat_id = Chat.objects.get(user_id_a=uid, user_id_b=998)
                Message.objects.create(message=input_text, chat=chat_id, name=username)

            request.websocket.send(message)


# 主动推送消息
@accept_websocket
def send_websocket(request):
    uid = request.GET.get("uid")

    if request.is_websocket():
        while 1:
            time.sleep(1)  ## 向前端发送时间
            
            try:
                data = Chat.objects.get(user_id_a=uid, user_id_b=998)
                ser = MessageModelSerializer(Message.objects.filter(chat_id=data.id), many=True)
                request.websocket.send(json.dumps(ser.data))
            except:
                request.websocket.send(json.dumps([{"message": ""}]))

urls.py

from django.urls import path, include
from .views import *


urlpatterns = [
    path('reception_socket/', reception_socket),    # 客服系统接收前端信息
    path('send_websocket/', send_websocket),  #客服发送消息
]

VUE前端

客户页面 staff_service.vue

我这里封装为组件了 你也可以给个路由成为一个单独的页面

在这里插入图片描述

<template>
  <div>
    <div>
      <a-button type="primary" @click="showDrawer">
        <a-icon type="plus"/>
        人工客服
      </a-button>

      <a-drawer
        title="翔翔客服带给您最好的体验"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose(false)"
      >
        <a-row :gutter="16">
          <table>
            <tr v-for="i in message">
              <th>{{i.name}}:</th>
              <td>{{ i.message }}</td>
            </tr>
          </table>
        </a-row>
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="Description">
                <a-textarea
                  v-model="inputText"
                  :rows="4"
                  placeholder="请输入问题描述"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose(false)">
            Cancel
          </a-button>
          <a-button type="primary" @click="onClose(true)">
            Submit
          </a-button>
        </div>
      </a-drawer>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import echarts from "echarts";

export default {
  name: "staff_service",
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      inputText: '',
      username: localStorage.getItem("username"),
      uid: localStorage.getItem("id"),
      message: [],
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose(ok) {
      this.visible = ok;
      if (ok === true) {
        var ed2020 = "2020";

        var sign = md5('price=500&goodid=3,1' + ed2020);

        console.log(sign);

        var _this = this;

        //判断浏览器是否支持websocket
        if ("WebSocket" in window) {
          console.log("支持");
          //生成websocket链接
          var ws = new WebSocket("ws://localhost:8000/user/reception_socket/");
          //发送链接请求
          ws.onopen = function () {
            var data = JSON.stringify({username: _this.username, inputText: _this.inputText, uid: _this.uid})
            ws.send(data);
          }
          //发送消息
          ws.onmessage = function (evt) {
            //将获取信息打印
            var received_msg = evt.data;
            // alert(received_msg);
          }
          //捕获断开链接
          ws.onclose = function () {
            console.log("链接已经关闭");
          }

        }
      }
    },
  },
  mounted() {
    // this.main()
    var ed2020 = "2020";

    var sign = md5('price=500&goodid=3,1' + ed2020);

    console.log(sign);


    var _this = this;


    //判断浏览器是否支持websocket
    if ("WebSocket" in window) {

      console.log("支持");
      //生成websocket链接
      var ws = new WebSocket("ws://localhost:8000/user/send_websocket/?uid=" + _this.uid);
      //发送链接请求
      ws.onopen = function () {
        ws.send("text");
      }
      //发送消息
      ws.onmessage = function (evt) {
        //将获取信息打印
        var received_msg = evt.data;
        var data
        var data2
        data = JSON.parse(received_msg)
        _this.message = data
        // data = JSON.parse(data)
        // console.log(data[0])

      }
      //捕获断开链接
      ws.onclose = function () {
        console.log("链接已经关闭");
      }
    }
  }
}
</script>

<style scoped>

</style>

客服页面service.vue

需要设置路由 客服是一个单独的页面

<template>
  <div>
    <div>
      <a-button type="primary" @click="showDrawer">
        <a-icon type="plus"/>
        人工客服
      </a-button>

      <a-drawer
        title="翔翔客服带给您最好的体验"
        :width="720"
        :visible="visible"
        :body-style="{ paddingBottom: '80px' }"
        @close="onClose(false)"
      >
        <a-row :gutter="16">
          <table>
            <tr v-for="i in message">
              <th>{{i.name}}:</th>
              <td>{{ i.message }}</td>
            </tr>
          </table>
        </a-row>
        <a-form :form="form" layout="vertical" hide-required-mark>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="Description">
                <a-textarea
                  v-model="inputText"
                  :rows="4"
                  placeholder="请输入问题描述"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div
          :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose(false)">
            Cancel
          </a-button>
          <a-button type="primary" @click="onClose(true)">
            Submit
          </a-button>
        </div>
      </a-drawer>
    </div>
  </div>
</template>

<script>
import md5 from 'js-md5';
import echarts from "echarts";

export default {
  name: "staff_service",
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      inputText: '',
      username: localStorage.getItem("username"),
      uid: localStorage.getItem("id"),
      message: [],
    };
  },
  methods: {
    showDrawer() {
      this.visible = true;
    },
    onClose(ok) {
      this.visible = ok;
      if (ok === true) {
        var ed2020 = "2020";

        var sign = md5('price=500&goodid=3,1' + ed2020);

        console.log(sign);

        var _this = this;

        //判断浏览器是否支持websocket
        if ("WebSocket" in window) {
          console.log("支持");
          //生成websocket链接
          var ws = new WebSocket("ws://localhost:8000/user/reception_socket/");
          //发送链接请求
          ws.onopen = function () {
            var data = JSON.stringify({username: "客服", inputText: _this.inputText, uid: _this.uid})
            ws.send(data);
          }
          //发送消息
          ws.onmessage = function (evt) {
            //将获取信息打印
            var received_msg = evt.data;
            // alert(received_msg);
          }
          //捕获断开链接
          ws.onclose = function () {
            console.log("链接已经关闭");
          }

        }
      }
    },
  },
  mounted() {
    // this.main()
    var ed2020 = "2020";

    var sign = md5('price=500&goodid=3,1' + ed2020);

    console.log(sign);


    var _this = this;


    //判断浏览器是否支持websocket
    if ("WebSocket" in window) {

      console.log("支持");
      //生成websocket链接
      var ws = new WebSocket("ws://localhost:8000/user/send_websocket/?uid=" + _this.uid);
      //发送链接请求
      ws.onopen = function () {
        ws.send("text");
      }
      //发送消息
      ws.onmessage = function (evt) {
        //将获取信息打印
        var received_msg = evt.data;
        var data
        var data2
        data = JSON.parse(received_msg)
        _this.message = data
        // data = JSON.parse(data)
        // console.log(data[0])

      }
      //捕获断开链接
      ws.onclose = function () {
        console.log("链接已经关闭");
      }
    }
  }
}
</script>

<style scoped>

</style>

最终效果

在这里插入图片描述

ok 今天的学习就到这里了

心--瘾
关注
专栏目录
使用uwsgi和gunicorn部署Django项目(智能客服系统)
brytlevson的博客
07-28 463
将智能问答模型用django做成web应用,再使用uwsgi或者gunicorn将应用部署到服务器
django+vue实现websocket即使通讯
qq_45632139的博客
05-06 1015
Websocket 即时通讯 1.需求 即时通讯工具一定要保障的是即时性 基于现在的通讯协议HTTP要如何保障即时性呢? 2.短连接型 基于HTTP短连接如何保障数据的即时性 HTTP的特性就是无状态的短连接,即一次请求一次响应断开连接失忆,这样服务端就无法主动的去寻找客户端给客户端主动推送消息 1.轮询 即:客户端不断向服务器发起请求索取消息 优点:基本保障消息即时性 缺点:大量的请求导致客户端...
推荐开源项目：vue-im - 基于Vue2.0的在线客服系统
gitblog_00414的博客
08-09 465
推荐开源项目：vue-im - 基于Vue2.0的在线客服系统 vue-imA Vue.js 2.0 IM；基于Vue2.0的在线客服系统项目地址:https://gitcode.com/gh_mirrors/vu/vue-im 在线客服系统在当今互联网应用中扮演着至关重要的角色，为用户提供即时、便捷的支持和服务。今天，我们向您推荐一款出色的开源项目——vue-im，它是一个完全基于Vue2.0...
基于django人工智能的售后服务管理系统-计算机毕业设计源码
最新发布
weixin1_ZYKJ985的博客
08-16 919
分配工单：管理员可以根据工单情况进行合理分配，保障售后服务效率。 监督管理：管理员可以监督售后人员的工作情况和服务质量。 数据分析：管理员可以对售后服务数据进行统计分析，评估服务水平和客户满意度。 知识库管理：管理员负责知识库的更新和维护，确保信息准确性和时效性。 通过客户服务模块，用户可以提交售后服务请求、查询服务进度，并与客服人员进行在线沟通，实现了客户与企业的快速互动。工单管理模块可实现工单的自动派发、处理和跟踪，提升售后服务效率。知识库模块整合了常见问题和解决方案，为客服人员提供参考资料......
Django实现websocket完成实时通讯、聊天室、在线客服等
weixin_30780649的博客
03-06 285
阅读目录 一 什么是Websocket 二 Django实现Websocket 三 dwebsocket安装 四 dwebsocket配置 五 使用 六 详解 一 什么是Websocket WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在Web...
python+django企业客户关系管理系统
QQ402205496的博客
02-07 546
管理员登录进入客户关系管理系统可以查看首页、个人中心、高管管理、经理管理、员工管理、外出拜访申请管理、客户资料管理、客户投诉管理、部门类别管理、职务类别管理、产品出入库管理、工单管理、公海管理、私海管理、商机管理、合同管理、回款管理、开票管理、退款管理、客户贡献分析管理、系统管理等信息。客户资料管理，在客户资料管理页面中可以查看客户名称、销售顾问、客户来源、客户等级、客户所处阶段、最近联系时间、客户联系人、头像等内容，并且根据需要对客户资料管理进行详情、修改或删除等详细操作。
Python-Django毕业设计房地产客服管理系统（程序+LW）
Python毕设源码程序王哥
01-11 148
管理员登录系统后，可以对首页、个人中心、用户管理、客服管理、房源信息管理、类型管理、值班信息管理、预约信息管理、行程安排管理、售房记录管理、客服预定管理、取消预约管理、投诉建议管理。预约信息管理，在预约信息管理页面，用户通过输入房源名称、类型、房屋地址、价格、账号、姓名、手机号码、预约时间、预约备注、申请日期、审核回复、审核状态。页面可以对房源名称、类型、房屋地址、价格、账号、姓名、手机号码、预约时间、预约备注、申请日期、审核回复、审核状态、审核等内容进行。留言板管理、系统管理等功能进行相应操作，如图5-
Django实现websocket完成实时通讯，聊天室，在线客服等
linjun的博客
11-29 1080
Django实现websocket完成实时通讯，聊天室，在线客服等
Python优秀项目 基于Django+Vue+websocket实时点对点通讯系统源码+部署文档+全部数据资料
05-25
Python优秀项目 基于Django+Vue+websocket实时点对点通讯系统源码+部署文档+全部数据资料.zip 1、代码压缩包内容 代码的项目文件 部署文档文件 2、代码运行版本 python3.7或者3.7以上的版本；若运行有误，根据提示...
高分项目 基于Python+Django+Vue+websocket实时点对点通讯系统源码+部署文档+全部数据资料.zip
05-13
高分项目 基于Python+Django+Vue+websocket实时点对点通讯系统源码+部署文档+全部数据资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试...
基于node+vue+element ui的websocket在线客服系统（简单实现）
04-15
基于node+vue+element ui的websocket在线客服系统（简单实现） 大学生课程设计 基于websocket的课程设计 自己大二写的课程设计
基于websocket的在线客服系统
04-15
基于websocket的在线客服系统 大学生课程设计 基于websocket的课程设计 自己大二写的课程设计
django-vue:django + vue 前后端同时且各自独立开发脚手架
04-29
5. **Django Channels**：如果项目中涉及实时通信，如WebSocket，Django Channels提供了一个框架，使得Django能够处理异步请求，与Vue.js的实时更新特性相配合。 6. **前端路由**：Vue Router是Vue.js的官方路由库...
基于Python+Django的客户关系管理系统
lingpao1688的博客
09-17 1254
基于Python+Django的客户关系管理系统 随着市场经济的深入发展，市场竞争、行业竞争越演越烈产品和服务的差异越来越小。以生产为中心、以销售产品为目的的市场战略逐渐被以客户为中心、以服务为目的的市场战略所取代。谁能掌握客户的需求趋势、加强与客户的关系、有效发掘和管理客户资源，谁就能获得市场竞争优势，在激烈的竞争中立于不败之地。企业、供应商、分销商及客户连成一片的价值链成为企业之间竞争的核心。为房地产企业开发一套客户关系管理系统成为必然趋势。 该系统所面向的对象为房地产企...
django+vue3实现websocket聊天室（群聊）
weixin_62935305的博客
06-23 5313
websocket 通信 channels配置 chat_ui配置 django+vue3实现 websocket聊天室
python 在线客服_django 使用 channels 搭建在线客服疑惑
weixin_39887531的博客
12-15 674
版本:python == 3.8.1Django 3.0.4channels 2.4.0channels-redis 2.4.2疑问如下，因为百度搜索的答案实在是一言难尽，都是千篇一律的一样，根据我的个人理解，和查看官网，在 channels 里面包括官方教程都是着重再讲多人聊天和群组聊天( group )，我想实现的是通过 layim 一对一聊天整体都能跑通，但是不知道为什么，a 用户发给 b ...
websocket实现在线客服
追求卓越，成功就在不经意间追上你
03-27 8205
websocket是什么可以百科去查找，这里直接上例子 如果需要联系qq:3684170 客户: 客服端:
Django+Vue WebSocket实战：建立实时通信示例
本文主要展示了如何使用Django和Vue.js框架实现WebSocket连接，以便实现实时通信功能。在文中，作者通过示例代码详细讲解了整个实现过程，这对于学习者或开发者了解WebSocket在实际项目中的应用具有较高的参考价值。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值