vue2.0+nginx代理webSocket

vue2.0+nginx代理webSocket

记录自己工作总结

##vue项目中
在public下创建Global.js，写入一下代码 ，nginx所在的ip地址为 193.168.11.11

var WebSocketUrl = 'ws://193.168.11.11:8100/webSocket' // 原地址'ws://172.16.00.00:8102/?user=admin'

在public下index.html中引入

<script src="Global.js"></script>

在页面中使用

		// 实例化socket
          this.socket = new WebSocket(WebSocketUrl)
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          

##nginx配置代理

server {
	listen  8100;
	# webStocket代理，
	location /webSocket {
        proxy_pass http://172.16.00.00:8102/?user=admin;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
	}
}

完成。