vue.js Django+VUE使用websocket

一个需求,需要读取一个 json 文件然后推送给前端

这里选择用的 dwebsocket,相比channels更简单一些

安装 dwebsocket

pip install dwebsocket

views.py

from dwebsocket.decorators import accept_websocket,require_websocket

import sys,os

import time

import json

from django.http import HttpResponse

def read():

path=os.path.join(os.path.dirname(os.path.dirname(os.getcwd())),'xxx/public.json')

with open("xxx/public.json",'r',encoding='utf8') as f:

return f.read()

@accept_websocket

def demo_api(request):

while 1:

txt=read()

time.sleep(3)

request.websocket.send(json.dumps(txt))

return HttpResponse('ok')

demo_api是主要函数.

@accept_websocket给需要进行 websocket 通信的函数加上装饰器

accept_websocket-—可以接受websocket请求和普通http请求 require_websocket—-只接受websocket请求,拒绝普通http请求

我这里使用的accept_websocket.但是我没有过滤请求.如果有需求可以使用if request.is_websocket()

在循环读取文件时出现一个问题.path 拿到的路径在django 启动之后,这个路径读取不到. 但是我单独去跑这个函数用 path 路径可以读取得到.很奇怪.到最后我写的绝对路径.这并没有发现是哪里的问题.

settings.py

WEBSOCKET_ACCEPT_ALL=True

vue 部分

created() {

this.initWebSocket();

},

destroyed() {

this.websock.close() //离开路由之后断开websocket连接

},

methods: {

initWebSocket() { //初始化weosocket

const wsuri = "ws://127.0.0.1:8000/v1.0/flight/";//django view 请求地址

this.websock = new WebSocket(wsuri);

this.websock.onopen = this.websocketonopen;

this.websock.onmessage = this.websocketonmessage;

// this.websock.onclose = this.websocketclose;

},

websocketonopen() { //连接建立之后执行send方法发送数据

console.log("链接成功")

// let actions = {"test":"12345"};

// this.websocketsend(JSON.stringify(actions));

},

websocketonmessage(e) { //数据接收

let redata=''

redata = JSON.parse(JSON.parse(e.data))

console.log(redata)

}

},

websocketsend(Data) {//数据发送

this.websock.send(Data);

},

// websocketclose(e){ //关闭

// console.log('断开连接',e);

// },

相关链接

 您阅读本篇文章共花了：