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=fal).encode('utf-8')  client.nd(b1)# 服务端发送消息def ndmsg():  sql = "lect * from customer"  res = db1.find_all(sql)  if len(clist)>0:    for i in clist:      i.nd(json.dumps({'list': res},ensure_ascii=fal).encode('utf-8'))      # websocketmsg(i, {'list': res})  return httprespon("ok")from apscheduler.schedulers.blocking import blockingschedulerdef getecharts(request):  scheduler = blockingscheduler()  scheduler.add_job(ndmsg,'interval',conds=1)  scheduler.start()  return httprespon('ok')

前端：

&l光良约定t;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">/d/file/titlepic/error.html </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", tup(){  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.onclo=function(e){    console.log(e);    socket.clo(); //关闭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: fal     },     axisline: {      show: fal     },     z: 10    },    yaxis: {     axisline: {      show: fal     },     axistick: {      show: fal     },     axislabel: {      color: '#999'     }    },    datazoom: [     {      type: 'inside'     }    ],    ries: [     {      type: 'bar',      showbackground: true,      itemstyle: {       color: new echarts.graphic.成都美食街lineargradient(0, 0, 0, 1, [        { offt: 0, color: '#83bff6' },        { offt: 0.5, color: '#188df0' },        { offt: 1, color: '#188df0' }       ])      },      emphasis: {       itemstyle: {        color: new echarts.graphic.lineargradient(0, 0, 0, 1, [         { offt: 0, color: '#2378f7' },         { offt: 0.7, color: '#2378f7' },         { offt: 1, color: '#83bff6' }        ])       }      },      data: data     }    ]   };// enable data zoom when ur 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.toption(option);  },  getweek(){   var chartdom = document.getelementb带名字的网名yid('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'     }    ],    ries: [     {      name: 'direct',      type: 'bar',      emphasis: {       focus: 'ries'      },      data: [320, 332, 301, 334, 390, 330, 320]     },     {      name: 'email',      type: 'bar',      stack: 'ad',      emphasis: {       focus: 'ries'      },      data: [120, 132, 101, 134, 90, 230, 210]     },     {      name: 'union ads',      type: 'bar',      stack: 'ad',      emphasis: {       focus: 'ries'      },      data: [220, 182, 191, 234, 290, 330, 310]     },     {      name: 'video ads',      type: 'bar',      stack: 'ad',      emphasis: {只有一个地球主要内容       focus: 'ries'      },      data: [150, 232, 201, 154, 190, 330, 410]     },     {      name: 'arch engine',      type: 'bar',      data: [862, 1018, 964, 1026, 1679, 1600, 1570],      emphasis: {       focus: 'ries'      },      markline: {       linestyle: {        type: 'dashed'       },       data: [[{ type: 'min' }, { type: 'max' }]]      }     },     {      name: 'baidu',      type: 'bar',      barwidth: 5,      stack: 'arch engine',      emphasis: {       focus: 'ries'      },      data: [620, 732, 701, 734, 1090, 1130, 1120]     },     {      name: 'google',      type: 'bar',      stack: 'arch engine',      emphasis: {       focus: 'ries'      },      data: [120, 132, 101, 134, 290, 230, 220]     },     {      name: 'bing',      type: 'bar',      stack: 'arch engine',      emphasis: {       focus: 'ries'      },      data: [60, 72, 71, 74, 190, 130, 110]     },     {      name: 'others',      type: 'bar',      stack: 'arch engine',      emphasis: {       focus: 'ries'      },      data: [62, 82, 91, 84, 109, 110, 120]     }    ]   };   option && mychart.toption(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内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！