django中websocket的具体使用
程序员文章站
2022-03-09 08:25:30
websocket是一种持久化的协议,http协议是一种无状态的协议,在特定场合我们需要使用长连接,做数据的实时更新,这种情况下我们就可以使用websocket做持久连接。http与websocket...
websocket是一种持久化的协议,http协议是一种无状态的协议,在特定场合我们需要使用长连接,做数据的实时更新,这种情况下我们就可以使用websocket做持久连接。http与websocket二者存在交集。
后端:
from dwebsocket.decorators import accept_websocket import json # 存储连接websocket的用户 clist = [] @accept_websocket def 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')
前端:
<template> <div class="bgpic"> <van-row style="padding-top: 10px;padding-bottom: 10px"> <van-col span="8"> <div id="weekmain" style="width: 400px;height: 300px"></div> </van-col> <van-col span="8">http://api.map.baidu.com/marker </van-col> <van-col span="8"> <div id="monthmain" style="width: 400px;height: 300px"></div> </van-col> </van-row> <van-row> <van-col span="8"></van-col> <van-col span="8"></van-col> <van-col span="8">{{infolist1}}</van-col> </van-row> </div> </template> <script> 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<this.infolist.length;i++){ dataaxis.push(this.infolist[i]["name"]) data.push(this.infolist[i]["tmoney"]) } let ymax = 10000; let datashadow = []; for (let i = 0; i < data.length; i++) { datashadow.push(ymax); } option = { title: { text: '特性示例:渐变色 阴影 点击缩放', subtext: 'feature sample: gradient color, shadow, click zoom' }, xaxis: { data: dataaxis, axislabel: { inside: true, color: '#fff' }, axistick: { show: false }, axisline: { show: false }, z: 10 }, yaxis: { axisline: { show: false }, axistick: { show: false }, axislabel: { color: '#999' } }, datazoom: [ { type: 'inside' } ], series: [ { type: 'bar', showbackground: true, itemstyle: { color: new echarts.graphic.lineargradient(0, 0, 0, 1, [ { offset: 0, color: '#83bff6' }, { offset: 0.5, color: '#188df0' }, { offset: 1, color: '#188df0' } ]) }, emphasis: { itemstyle: { color: new echarts.graphic.lineargradient(0, 0, 0, 1, [ { offset: 0, color: '#2378f7' }, { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#83bff6' } ]) } }, data: data } ] }; // enable data zoom when user click bar. const zoomsize = 6; mychart.on('click', function (params) { console.log(dataaxis[math.max(params.dataindex - zoomsize / 2, 0)]); mychart.dispatchaction({ type: 'datazoom', startvalue: dataaxis[math.max(params.dataindex - zoomsize / 2, 0)], endvalue: dataaxis[math.min(params.dataindex + zoomsize / 2, data.length - 1)] }); }); option && mychart.setoption(option); }, getweek(){ var chartdom = document.getelementbyid('weekmain'); var mychart = echarts.init(chartdom); var option; option = { tooltip: { trigger: 'axis', axispointer: { type: 'shadow' } }, legend: {}, grid: { left: '3%', right: '4%', bottom: '3%', containlabel: true }, xaxis: [ { type: 'category', data: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] } ], yaxis: [ { type: 'value' } ], series: [ { name: 'direct', type: 'bar', emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'email', type: 'bar', stack: 'ad', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'union ads', type: 'bar', stack: 'ad', emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'video ads', type: 'bar', stack: 'ad', emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'search engine', type: 'bar', data: [862, 1018, 964, 1026, 1679, 1600, 1570], emphasis: { focus: 'series' }, markline: { linestyle: { type: 'dashed' }, data: [[{ type: 'min' }, { type: 'max' }]] } }, { name: 'baidu', type: 'bar', barwidth: 5, stack: 'search engine', emphasis: { focus: 'series' }, data: [620, 732, 701, 734, 1090, 1130, 1120] }, { name: 'google', type: 'bar', stack: 'search engine', emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 290, 230, 220] }, { name: 'bing', type: 'bar', stack: 'search engine', emphasis: { focus: 'series' }, data: [60, 72, 71, 74, 190, 130, 110] }, { name: 'others', type: 'bar', stack: 'search engine', emphasis: { focus: 'series' }, data: [62, 82, 91, 84, 109, 110, 120] } ] }; option && mychart.setoption(option); }, }, mounted() { this.infoshow() this.getweek() this.initdata() } } </script> <style scoped> .bgpic{ background-image: url("../../../https/4.jpg"); width: 1269px; height: 781px; } </style>
到此这篇关于django中websocket的具体使用的文章就介绍到这了,更多相关django websocket内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: Python matplotlib 绘制散点图详解建议收藏
下一篇: 5G-RNTI
推荐阅读
-
C#中datagridview使用tooltip控件显示单元格内容的方法
-
CentOs 7.3中搭建RabbitMQ 3.6单机多实例服务的步骤与使用
-
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
-
3dsmax怎么使用可编辑样条线中的横截面功能?
-
YII2框架中验证码的简单使用方法示例
-
YII2框架中behavior行为的理解与使用方法示例
-
YII2框架中actions的作用与使用方法示例
-
Django组件之cookie与session的使用方法
-
使用Entrust扩展包在laravel 中实现RBAC的功能
-
PS中模糊/锐化/涂抹/减淡等工具的使用方法