Shulou(Shulou.com)06/02 Report--

本文小编为大家详细介绍"django中websocket怎么使用"，内容详细，步骤清晰，细节处理妥当，希望这篇"django中websocket怎么使用"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

websocket是一种持久化的协议，HTTP协议是一种无状态的协议，在特定场合我们需要使用长连接，做数据的实时更新，这种情况下我们就可以使用websocket做持久连接。http与websocket二者存在交集。

后端：from dwebsocket.decorators import accept_websocketimport json# 存储连接websocket的用户clist = [] @accept_websocketdef websocketLink(request): # 获取连接 if request.is_websocket: # 新增 用户 连接信息 clist.append(request.websocket) # 监听接收客户端发送的消息 或者 客户端断开连接 for message in request.websocket: break # 发送消息def websocketMsg(client, msg): b1 = json.dumps(msg,ensure_ascii=False).encode('utf-8') client.send(b1) # 服务端发送消息def sendmsg(): sql = "select * from customer" res = db1.find_all(sql) if len(clist)>0: for i in clist: i.send(json.dumps({'list': res},ensure_ascii=False).encode('utf-8')) # websocketMsg(i, {'list': res}) return HttpResponse("ok") from apscheduler.schedulers.blocking import BlockingScheduler def getecharts(request): scheduler = BlockingScheduler() scheduler.add_job(sendmsg,'interval',seconds=1) scheduler.start() return HttpResponse('ok')前端： http://api.map.baidu.com/marker {{infolist1}} import * as echarts from 'echarts';// import myaxios from "../../../https/myaxios";import axios from 'axios';import {reactive} from 'vue';export default { name: "myweek", setup(){ let infolist1 = reactive({"data":[]}) // let mydata = reactive([]) const initdata=()=>{ var socket = new WebSocket("ws:127.0.0.1:8000/websocketLink"); socket.onopen = function () { console.log('连接成功');//成功连接上Websocket }; socket.onmessage = function (e) { // alert('消息提醒: ' + e.data); //打印服务端返回的数据 infolist1.data = e.data console.log(e.data) // mydata = infolist1.list // console.log(mydata) }; socket.onclose=function(e){ console.log(e); socket.close(); //关闭TCP连接 }; } return{ infolist1, initdata } }, data(){ return{ infolist:[], } }, methods:{ mget(){ axios.get("http://127.0.0.1:8000/getecharts").then(res=>{ console.log(res) }) }, infoshow(){ axios.get("http://localhost:8000/infoshow","get").then(res=>{ this.infolist=res.data.list this.getmonth() this.mget() }) }, getmonth(){ var chartDom = document.getElementById('monthmain'); var myChart = echarts.init(chartDom); var option; // prettier-ignore let dataAxis = [];// prettier-ignore let data = []; for(let i=0;i

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.