websocket的使用及nginx通信的ws代理配置

• 最近在做的vue項目要使用websocket，本文講述了websocket在vue中使用及打包后使用nginx代理。
  1、創建vue項目，這里不在詳細去說，如果在創建項目時有疑問請訪問: vue創建項目.

<template>
	<div></div>
</template>

<script>
	export default {
		name: 'socket',
		data(){
			return {
				websock: null,
			}
		},
		create(){
			this.initWebSocket(); // 初始化websocket
		},
		method:{
			// 初始化websocket
			initWebSocket(){
				let userId = 1;
				let wsUrl = 'ws://127.0.0.1:8080/webSocketServer/'+ userId +'';
				this.websock = new WebSocket(wsUrl); // 建立websocket
				this.websock.onopen= this.webSocketOnopen(); // 建立連接
				this.websock.onmessage = this.webSocketOnmessage; // 接受數據
      			this.websock.onerror = this.webSockeToOnerror; // 連接失敗后重新連接
      			this.websock.onclose = this.webSocketClose; // 關閉socket
			},
			// 建立鏈接
			webSocketOnopen(){
				this.webSocketsEnd();
			},
			// 發送數據
			webSocketsEnd(){
				let actions = {'test','測試鏈接socket'};
				this.websock.send(JSON.stringify(actions));
			},
			// 接收后端返回的數據
			webSocketOnmessage(data){
				console.log(data);
			},
			// 建立鏈接失敗后重連
			websocketonerror(){
				// 使用setTimeout是為了避免重新鏈接過快導致瀏覽器卡死
		        setTimeout(()=>{
		            this.initWebSocket();
		        },10000)
		    },
		    // 關閉連接
		    websocketclose(data){
		      	console.log('socket斷開連接',data);
		    },
		}，
		// 離開當前路由后銷毀socket連接
		destroyed() {
		   this.websock.close();
		},
	}
</script>

• 到目前為止，我們已經創建好了webSocket了，但是在打包后實際應用中，難免會遇到很多問題，這里我們選擇了nginx代理方式進行演示。

1、配置nginx，打開nginx.conf

	server {
		listen			89;
		server_name		localhost;

		location / {
			root	iot/dist;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		
		location /api {
            proxy_pass http://127.0.0.1:8080;
			# 開啟nginx對websocket的支持
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
        }

	}

2、進入到vue全局配置.env下，如果沒有.env，請在package.json同級目錄下創建。

	# 配置socket使用地址
	VUE_APP_BASE_API = /api

3、其次進入到vue組件中進行修改，具體如下：

<template>
	<div></div>
</template>

<script>
	export default {
		name: 'socket',
		data(){
			return {
				websock: null,
			}
		},
		create(){
			this.initWebSocket(); // 初始化websocket
		},
		method:{
			// 初始化websocket
			initWebSocket(){
				let userId = 1;
				let socketURL = process.env.VUE_APP_BASE_API; // 獲取vue全局配置env的變量
				let wsUrl = `ws://`+ location.host + socketURL +`/webSocketServer/`+userid+``;
				this.websock = new WebSocket(wsUrl); // 建立websocket
				this.websock.onopen= this.webSocketOnopen(); // 建立連接
				this.websock.onmessage = this.webSocketOnmessage; // 接受數據
      			this.websock.onerror = this.webSockeToOnerror; // 連接失敗后重新連接
      			this.websock.onclose = this.webSocketClose; // 關閉socket
			},
			// 建立鏈接
			webSocketOnopen(){
				this.webSocketsEnd();
			},
			// 發送數據
			webSocketsEnd(){
				let actions = {'test','測試鏈接socket'};
				this.websock.send(JSON.stringify(actions));
			},
			// 接收后端返回的數據
			webSocketOnmessage(data){
				console.log(data);
			},
			// 建立鏈接失敗后重連
			websocketonerror(){
				// 使用setTimeout是為了避免重新鏈接過快導致瀏覽器卡死
		        setTimeout(()=>{
		            this.initWebSocket();
		        },10000)
		    },
		    // 關閉連接
		    websocketclose(data){
		      	console.log('socket斷開連接',data);
		    },
		}，
		// 離開當前路由后銷毀socket連接
		destroyed() {
		   this.websock.close();
		},
	}
</script>