Table of contents

1. Problems

1.1 Problem Description

A small project uses websocket. This websocket is completely running normally locally. Whether it is the information communication of the front and backstage or the reception of abnormal error reports , there is no abnormality. Can't link anymore

(PS: The blogger’s websocket is applied in uni-app, so the websocket that comes with uni-app is used. There is no difference in essence~)

1.2 Detailed description of the problem

The simple websocket code on the uni-app side is roughly as follows;

// 建立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))
});

When the project is started and the websocket page is opened, the foreground will print out: --- data communication has been opened ---,

The result is correctly printed locally after running ;

But when the background file is packaged and deployed to the Alibaba Cloud server , the websocket link is abnormal and the result cannot be printed correctly;

Two, solve

I have encountered two errors here . The first one is the link type under https and the abnormal configuration of nginx . After these two problems are solved, websocket can be used normally;

2.1 Link types under https

This problem is mainly because the type in the link is wrongly written, and ws needs to be rewritten as wss . For example, because the http type is used locally, the websocket link is written as

ws://localhost:5002

But when deployed to the server, since the server is in https format, ws is obviously no longer suitable, and needs to be changed to wss , ie

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

Put it in the specific uni-app code and that's it

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

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

In this way, it will be compatible with websocket under https;

2.2 Modify the configuration of Nginx

In addition to changing wss, nginx also needs to be modified. By default, Nginx does not support it, so you need to manually enable this function;

First, find the configuration file of Nginx, and then add these statements in the configuration file for the background that needs to open 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;

Take my side as an example, it was like this before the change

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 后台接口地址;
    }
}

After the change is as follows

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; 
    }
}

After restarting Nginx , websocket can be used normally, solving the problem;

Solve the problem that websocket cannot be used when deployed to the server https