Índice

1. Problemas

1.1 Descrição do Problema

Um pequeno projeto usa websocket. Este websocket está rodando normalmente normalmente localmente. Quer seja a comunicação de informações do front e backstage ou a recepção de relatórios de erros anormais não há anormalidade.,

(PS: O websocket do blogueiro é aplicado no uni-app, então o websocket que vem com o uni-app é usado. Não há diferença em essência~)

1.2 Descrição detalhada do problema

O código websocket simples no lado uni-app é mais ou menos o seguinte;

// 建立websocket
uni.connectSocket({
  url: Setting.wsUrl
});

// 打开
uni.onSocketOpen(res => {
  console.log('--- 数据通信已打开 ---');
});

uni.onSocketError((res) => {
  console.log('--- 数据通信连接失败，请检查 ---');
});

uni.onSocketMessage((res) => {
  // console.log('收到服务器内容：' + res.data);
  this.resultData(JSON.parse(res.data))
});

Quando o projeto é iniciado e a página do websocket é aberta, o foreground imprimirá: --- comunicação de dados foi aberta ---,

O resultado é impresso localmente corretamente após a execução ;

Mas quando o arquivo de fundo é empacotado e implantado no servidor Alibaba Cloud , o link do websocket é anormal e o resultado não pode ser impresso corretamente;

Dois, resolva

Eu encontrei dois erros aqui . O primeiro é o tipo de link em https e a configuração anormal do nginx . Depois que esses dois problemas forem resolvidos, o websocket pode ser usado normalmente;

2.1 Tipos de link em https

Esse problema ocorre principalmente porque o tipo no link está escrito incorretamente e ws precisa ser reescrito como wss . Por exemplo, como o tipo http é usado localmente, o link websocket é escrito como

ws://localhost:5002

Mas quando implantado no servidor, como o servidor está no formato https, ws obviamente não é mais adequado e precisa ser alterado para wss , ou seja

wss://www.xxxxxx.com/xxx/

Coloque no código uni-app específico e pronto

// 建立websocket
uni.connectSocket({
  url: "ws://localhost:5002"
});

// 需要改成 wss 开头的
uni.connectSocket({
  url: "wss://www.xxxx.com/xxxx"
});

Desta forma, será compatível com websocket em https;

2.2 Modifique a configuração do Nginx

Além de alterar o wss, o nginx também precisa ser modificado.Por padrão, o Nginx não suporta, então você precisa habilitar manualmente esta função;

Primeiro, encontre o arquivo de configuração do Nginx e, em seguida, adicione essas instruções no arquivo de configuração para o plano de fundo que precisa abrir o websocket

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Real-IP $remote_addr;

Tome o meu lado como exemplo, era assim antes da mudança

server {
	listen 443 ssl;
	server_name www.xxxx.com;
	# access_log  /var/log/nginx/access.log  main;
	# error_log  /var/log/nginx/error.log;

	ssl_certificate      #填写解压的pem文件
	ssl_certificate_key  #填写解压的key文件

	# ssl on;
	ssl_session_cache    shared:SSL:10m;
	ssl_session_timeout  50m;

	ssl_ciphers  HIGH:!aNULL:!MD5;
	ssl_prefer_server_ciphers  on;

	location / {
		root 前台文件;
	}
	location /api/ {
		proxy_pass 后台接口地址;
	}
	location /api2/ {
		proxy_pass 后台接口地址;
    }
}

Após a alteração é o seguinte

server {
	listen 443 ssl;
	server_name www.xxxx.com;
	# access_log  /var/log/nginx/access.log  main;
	# error_log  /var/log/nginx/error.log;

	ssl_certificate      #填写解压的pem文件
	ssl_certificate_key  #填写解压的key文件

	# ssl on;
	ssl_session_cache    shared:SSL:10m;
	ssl_session_timeout  50m;

	ssl_ciphers  HIGH:!aNULL:!MD5;
	ssl_prefer_server_ciphers  on;

	location / {
		root 前台文件;
	}
	location /api/ {
		proxy_pass 后台接口地址;
	}
	location /api2/ {
		proxy_pass 后台接口地址;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Real-IP $remote_addr; 
    }
}

Após reiniciar o Nginx , o websocket pode ser usado normalmente, resolvendo o problema;

Resolva o problema de que o websocket não pode ser usado quando implantado no servidor https