Python3+Flask结合Socket.io配合前端Vue实现简单全双工在线客服系统

简介: 在之前的一篇文章中:[为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统](https://v3u.cn/a_id_67),详细介绍了websocket协议以及结合Django如何实现各种功能,本次我们尝试采用Socket.io这个库和Flask来配合使用,完成一个简易的在线客服聊天系统,看看二者有什么区别。

在之前的一篇文章中:为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统,详细介绍了websocket协议以及结合Django如何实现各种功能,本次我们尝试采用Socket.io这个库和Flask来配合使用,完成一个简易的在线客服聊天系统,看看二者有什么区别。

Socket.IO 就是一个封装了 Websocket、基于 Node 的 JavaScript 框架,包含 client 的 JavaScript 和 server 的 Node(现在也支持python,go lang等语言)。其屏蔽了所有底层细节,让顶层调用非常简单,另外,Socket.IO 还有一个非常重要的好处。其不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等。换句话说,当 Socket.IO 检测到当前环境不支持 WebSocket 时,能够自动地选择最佳的方式来实现网络的实时通信,这一点就比websocket要智能不少。

我们先进行后端服务的搭建

pip install flask  
pip install flask-cors  
pip install flask-socketio
AI 代码解读

分别安装Flask本地,跨域模块,以及socketio模块

适当升级你的pip,注意版本不要过低,下面是本次demo的版本号

Flask                 1.1.1  
Flask-Cors            3.0.8  
Flask-SocketIO        4.3.0  
Flask-SQLAlchemy      2.4.1
AI 代码解读

随后我们简单写一个flask的入口启动文件 manage.py

from flask import Flask  
from flask_sqlalchemy import SQLAlchemy  
import pymysql  
from flask import request,jsonify  
from flask_cors import CORS  
from flask_socketio import SocketIO,send,emit  
import urllib.parse  
  
pymysql.install_as_MySQLdb()  
   
app = Flask(__name__)  
  
CORS(app,cors_allowed_origins="*")  
  
socketio = SocketIO(app,cors_allowed_origins='*')  
   
@socketio.on('message')  
def handle_message(message):  
    message = urllib.parse.unquote(message)  
    print(message)  
    send(message,broadcast=True)  
  
@socketio.on('connect', namespace='/chat')  
def test_connect():  
    emit('my response', {'data': 'Connected'})  
  
@socketio.on('disconnect', namespace='/chat')  
def test_disconnect():  
    print('Client disconnected')  
   
if __name__ == '__main__':  
    socketio.run(app,debug=True,host="0.0.0.0",port=5000)
AI 代码解读

这里简单说一下需要注意的地方,实例化socketio对象的时候,要加上cors\_allowed\_origins来设置跨域,前后端分离项目让人伤脑筋的地方就是浏览器同源策略问题,而跨域最好由server端来单独配置,这样的好处是当多个前端项目同时共用一套微服务接口时,就不用每个前端项目都配置一次跨域了。

我们写了三个基于socketio的视图方法,connect和disconnect顾名思义,当clinet发起连接或者断开时我们可以及时捕获到,而message方法就是前后端进行消息通信的重要方法。

发送消息的时候方法加了一个broadcast参数,这是socket.io极具特色的功能,类似广播的效果,可以同时给不同链接的client发送消息,即可以用于聊天,也可以用来做消息推送。

最后需要注意的一点是,client发送消息时,最好用urlencode编码一下,这样可以解决中文乱码问题,而在server端,可以用urllib.parse.unquote()来进行解码操作。

运行命令启动后端服务

python3 manage.py
AI 代码解读

服务正常启动在5000端口上,就说明后端没有问题了。

随后我们来配置前端(client),前端采用vue2.0框架来驱动,也需要安装socket.io模块

npm install vue-socket.io@2.1.0
AI 代码解读

这里一定要指定版本号来安装,版本是2.1.0,因为该依赖的最新版在vue2.0项目中编译时会报错

在入口文件main.js中引用

import VueSocketio from 'vue-socket.io';  
  
Vue.use(VueSocketio,'http://127.0.0.1:5000');
AI 代码解读

注意链接的url是后端服务的地址+端口,千万不要加其他url后缀或者命名空间

新建一个index.vue组件来进行模拟用户链接

<template>  
  <div>  
  
    <div v-for="item in log_list"  
    >  
    {{item}}  
  </div>  
  
    <input v-model="msg" />  
  
    <button @click="send">发送消息</button>  
  
  
</div>  
    
</template>  
  
  
   
<script>  
  
  
export default {  
  data () {  
    return {  
      msg: "",  
      log_list:[]  
    }  
  },  
  //注册组件标签  
  components:{  
  
  
  },  
  sockets:{  
    connect: function(){  
      console.log('socket 连接成功')  
    },  
    message: function(val){  
      console.log('返回:'+val);  
    this.log_list.push(val);  
    }  
},  
  mounted:function(){  
  
        
     
    
},  
  methods:{  
  
    send(){  
      this.$socket.emit('message',encodeURI("用户:"+this.msg));  
    },  
    
  
       
  }  
}  
  
  
</script>  
   
<style>  
  
  
  
</style>
AI 代码解读

启动前端服务

npm run dev
AI 代码解读

访问前端页面 http://localhost:8080 可以看到服务成功链接

这时可以尝试再做一个后台客服的组件页面item.vue,模拟用户和客服分别在不同的电脑进行聊天的场景

<template>  
  <div>  
  
    <div v-for="item in log_list"  
    >  
    {{item}}  
  </div>  
  
    <input v-model="msg" />  
  
    <button @click="send">发送消息</button>  
  
  
</div>  
    
</template>  
  
  
   
<script>  
  
  
export default {  
  data () {  
    return {  
      msg: "",  
      log_list:[]  
    }  
  },  
  //注册组件标签  
  components:{  
  
  
  },  
  sockets:{  
    connect: function(){  
      console.log('socket 连接成功')  
    },  
    message: function(val){  
      console.log('返回:'+val);  
      this.log_list.push(val);  
    }  
},  
  mounted:function(){  
  
        
},  
  methods:{  
  
    send(){  
      this.$socket.emit('message',encodeURI("客服:"+this.msg));  
    },  
    
  
       
  }  
}  
  
  
</script>  
   
<style>  
  
  
  
</style>
AI 代码解读

效果是这样的:

整个流程还是相对简单的,比起django的dwebsocket模块,socket.io显然更加灵活和方便,如果需要做一些主动推送任务,也可以利用socket.io的广播功能,其原理和实时聊天是一样的。

目录
打赏
0
0
0
0
1681
分享
相关文章
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
2025年有哪些工单管理系统值得推荐?
随着企业数字化转型加速,工单管理系统成为优化流程、提升服务的关键工具。2025年备受关注的主流系统包括:合力亿捷,中国移动,中国联通,中国电信等
5 0
2025最新排名|盘点值得推荐的5个在线客服系统
在数字化浪潮下,在线客服系统迅速发展,成为企业提升竞争力的关键。本文推荐五款2025年值得使用的在线客服系统:合力亿捷、淘宝、京东、华为云和中国移动客服系统。它们各自具备全渠道接入、智能问答、数据分析、高稳定性等亮点,助力企业高效服务客户,优化营销策略并提升整体运营效率。
63 24
AI实践:智能工单系统的技术逻辑与应用
智能工单系统是企业服务管理的核心工具,通过多渠道接入、自然语言处理等技术,实现工单自动生成、分类和分配。它优化了客户服务流程,提高了效率与透明度,减少了运营成本,提升了客户满意度。系统还依托知识库和机器学习,持续改进处理策略,助力企业在竞争中脱颖而出。
89 5
年度评选 | 2024年客服系统6大品牌
在2024年的客服系统市场中,合力亿捷等服务商品牌展现了各自在技术研发、产品创新和行业应用等方面的卓越实力。
61 1
Python 语言结合 Flask 框架来实现一个基础的代购商品管理、用户下单等功能的简易系统
这是一个使用 Python 和 Flask 框架实现的简易代购系统示例,涵盖商品管理、用户注册登录、订单创建及查看等功能。通过 SQLAlchemy 进行数据库操作,支持添加商品、展示详情、库存管理等。用户可注册登录并下单,系统会检查库存并记录订单。此代码仅为参考,实际应用需进一步完善,如增强安全性、集成支付接口、优化界面等。
IM系统在体育直播网站中的重要性
IM(即时通讯)系统在体育直播平台中至关重要,提升用户体验、促进社交互动和增强平台活跃度。它支持实时互动、增强观赛氛围、构建社交网络、推送即时信息、创造商业价值并提供多元化互动体验。高并发性能、实时稳定性和用户安全是实现的关键。通过集成IM系统,平台能更好地满足观众互动需求,提升运营效益。 代码示例展示了如何在比赛数据响应中设置比赛ID、游戏ID、系列赛ID等基本信息,并检查是否有计划和关注标记。
基于 Node.js Socket 算法搭建局域网屏幕监控系统
在数字化办公环境中,局域网屏幕监控系统至关重要。基于Node.js的Socket算法实现高效、稳定的实时屏幕数据传输,助力企业保障信息安全、监督工作状态和远程技术支持。通过Socket建立监控端与被监控端的数据桥梁,确保实时画面呈现。实际部署需合理分配带宽并加密传输,确保信息安全。企业在使用时应权衡利弊,遵循法规,保障员工权益。
52 7
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
108 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
陪玩系统架构设计陪玩系统前后端开发,陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等,确保稳定性和扩展性。前端可选用React、Vue或Uniapp,后端用Spring Boot或Django,数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐,提升用户体验和平台粘性。
91 0

热门文章

最新文章

推荐镜像

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等