快捷導(dǎo)航

django中websocket的具體使用

更新時間：2022年01月21日 15:02:05 作者：knight?and?king

本文主要介紹了django中websocket的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

websocket是一種持久化的協(xié)議，HTTP協(xié)議是一種無狀態(tài)的協(xié)議，在特定場合我們需要使用長連接，做數(shù)據(jù)的實時更新，這種情況下我們就可以使用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)
? ? ? ? # 監(jiān)聽接收客戶端發(fā)送的消息 或者 客戶端斷開連接
? ? ? ? for message in request.websocket:
? ? ? ? ? ? break
?
?# 發(fā)送消息
def websocketMsg(client, msg):
? ? b1 = json.dumps(msg,ensure_ascii=False).encode('utf-8')
? ? client.send(b1)
?
# 服務(wù)端發(fā)送消息
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);
? ? ? ? //打印服務(wù)端返回的數(shù)據(jù)
? ? ? ? infolist1.data = e.data
? ? ? ? console.log(e.data)
? ? ? ? // mydata = infolist1.list
? ? ? ? // console.log(mydata)
? ? ? };
? ? ? socket.onclose=function(e){
? ? ? ? console.log(e);
? ? ? ? socket.close(); //關(guān)閉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>

到此這篇關(guān)于django中websocket的具體使用的文章就介紹到這了,更多相關(guān)django websocket內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: