Django后端-Vue前端-dwebsocket通信

最新推荐文章于 2024-08-10 08:29:47 发布

景小亮

最新推荐文章于 2024-08-10 08:29:47 发布

阅读量842

点赞数

分类专栏：前后端文章标签： vue.js

本文链接：https://blog.csdn.net/m1131980108/article/details/103891851

版权

前后端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

django

Python环境下

pip install dwebsocket

django的setting.py文件

# 看到其他博客里有这一步，但是添加中间件后，django报错，故注释掉
# 只添加了WEBSOCKET_ACCEPT_ALL = True
MIDDLEWARE = [
	...
	# 'dwebsocket.middleware.WebSocketMiddleware',
]

WEBSOCKET_ACCEPT_ALL = True

view.py文件下

from dwebsocket.decorators import accept_websocket, require_websocket

@accept_websocket
def demo_api(request):
	if request.is_websocket():
		msg = 23
		request.webscoket.send(str(msg)) # send(必须是字符串)

urls.py 里添加对应uri或者api

Vue

npm install -S vue-websocket

根目录下的main.js

import VueWebsocket from 'vue-websocket'

Vue.use(VueWebsocket);

页面里


data(){
		return {
			Value: '', 
		}
	},

methods: {
	initWebSocket() {
		this.websocket = new WebSocket("ws://localhost:8000/yourDefinedURI");
		this.websocket.onmessage = this.webgetMessage;
	}
	webgetMessage(msg){
		console.log(msg.data);	// 控制台输出
		this.$message(msg.data);	// VUE里的弹框输出
		this.Value = msg.data		// msg.data 是字符串类型, 赋值给Value用于其他用途
	}
}