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