Django后端-Vue前端-dwebsocket通信

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用于其他用途
	}
}