django中websocket的具体使用


Posted in Python onJanuary 22, 2022

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 相关文章推荐
python笔记(1) 关于我们应不应该继续学习python
Oct 24 Python
Python中的异常处理学习笔记
Jan 28 Python
python删除列表中重复记录的方法
Apr 28 Python
django接入新浪微博OAuth的方法
Jun 29 Python
Python+django实现文件下载
Jan 17 Python
python机器学习库常用汇总
Nov 15 Python
python实现简易通讯录修改版
Mar 13 Python
在python中使用with打开多个文件的方法
Jan 07 Python
python多继承(钻石继承)问题和解决方法简单示例
Oct 21 Python
Python之Numpy的超实用基础详细教程
Oct 23 Python
python实现数据清洗(缺失值与异常值处理)
Dec 02 Python
python解析照片拍摄时间进行图片整理
Jul 23 Python
Django+Nginx+uWSGI 定时任务的实现方法
Jan 22 #Python
梳理总结Python开发中需要摒弃的18个坏习惯
Jan 22 #Python
Pandas搭配lambda组合使用详解
Jan 22 #Python
Python中的tkinter库简单案例详解
Jan 22 #Python
解析python中的jsonpath 提取器
Jan 18 #Python
Python中如何处理常见报错
Jan 18 #Python
Python机器学习应用之工业蒸汽数据分析篇详解
You might like
详解PHP中的PDO类
2015/07/06 PHP
php进程间通讯实例分析
2016/07/11 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python reduce()函数的用法小结
2017/11/15 Python
python使用tornado实现登录和登出
2018/07/28 Python
Django获取应用下的所有models的例子
2019/08/30 Python
利用python绘制正态分布曲线
2021/01/04 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
三年级班级文化建设方案
2014/05/04 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2014年优秀党员材料
2014/12/18 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript