nginx配置websorket代理 并且结合vue建立一个websocket请求

1. 配置nginx代理websocket
在nginx.conf中添加以下配置

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }

    location /ws {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

这里的配置是在80端口监听，当请求路径为/ws时，转发到本地8080端口，实现websocket代理。同时也需要注意添加Upgrade和Connection的头信息。

2. 使用vue建立一个websocket请求
在vue项目中，可以使用socket.io-client来建立websocket连接。在main.js中添加以下代码

import io from 'socket.io-client'

const socket = io('http://yourdomain.com/ws', {
  transports: ['websocket']
})

socket.on('connect', () => {
  console.log('connected')
})

socket.on('message', (data) => {
  console.log(data)
})

socket.on('disconnect', () => {
  console.log('disconnected')
})

socket.emit('message', 'hello')

这里的代码是建立一个连接到yourdomain.com的websocket，同时添加了三个事件监听：connect表示连接成功，message表示接收到消息，disconnect表示断开连接。最后还发送了一条消息。

这样，当websocket请求发送到yourdomain.com时，nginx会将请求转发到本地的8080端口，建立websocket连接。vue项目中可以使用socket.io-client来发送和接收消息。