nginx配置websocket的问题记录

最新推荐文章于 2024-07-22 13:11:05 发布

lgoodbook

最新推荐文章于 2024-07-22 13:11:05 发布

阅读量1.2k

点赞数 3

文章标签： websocket nginx

本文链接：https://blog.csdn.net/lgoodbook/article/details/107369383

版权

Wss Https 配置

当域名是https 时必须使用wss 来连接，wss://域名/nginx 匹配规则/后端endpoint/参数

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

upstream websocket {
	server 127.0.0.1:8080;
	keepalive 1024;
}

server {
	listen	 443 ssl;
	server_name  www.url.cn;  #你的域名
	root /data/app/nginx/html;

	ssl_certificate cert/你的ssl密钥.pem;
	ssl_certificate_key cert/你的ssl密钥.key;
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE+AES128:RSA+AES128:ECDHE+AES256:RSA+AES256:ECDHE+3DES:RSA+3DES;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;
        location / {
		root /data/app/nginx/html/megrez;
             	try_files $uri $uri/ /index.html;
        }

        location /api/ {
                proxy_set_header                Host            $host;
                proxy_set_header                X-Real-IP       $remote_addr;
                proxy_set_header                X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header                Cookie          $http_cookie;
                client_max_body_size            100m;
                proxy_pass                      http://127.0.0.1:8080/;
        }

		location /wss/ {
			proxy_pass 				http://websocket/;
			proxy_read_timeout 		300s;
			proxy_set_header 		Host		$host;
			proxy_set_header 		X-Real-IP 	$remote_addr;
			proxy_set_header 		X-Forwarded-For $remote_addr;
			proxy_http_version 		1.1;
			#重要配置
			proxy_set_header 		Upgrade 	$http_upgrade;
			proxy_set_header 		Connection 	"Upgrade";
		}

 		error_page 404 /404.html;
            location = /40x.html {
    	}

    	error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
}

WS HTTP 配置

当域名是http 时使用ws 来连接，ws://域名/nginx 匹配规则/后端endpoint/参数

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

upstream websocket {
	server 127.0.0.1:8080;
	keepalive 1024;
}

server {
	listen	 80;
	server_name  www.url.cn;  #你的域名
	root /data/app/nginx/html;

       location / {
				root /data/app/nginx/html/megrez;
            	try_files $uri $uri/ /index.html;
       }

        location /api/ {
                proxy_set_header                Host            $host;
                proxy_set_header                X-Real-IP       $remote_addr;
                proxy_set_header                X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header                Cookie          $http_cookie;
                client_max_body_size            100m;
                proxy_pass                      http://127.0.0.1:8080/;
        }

		location /ws/ {
			proxy_pass 				http://websocket/;
			proxy_read_timeout 		300s;
			proxy_set_header 		Host		$host;
			proxy_set_header 		X-Real-IP 	$remote_addr;
			proxy_set_header 		X-Forwarded-For $remote_addr;
			proxy_http_version 		1.1;
			#重要配置
			proxy_set_header 		Upgrade 	$http_upgrade;
			proxy_set_header 		Connection 	"Upgrade";
		}

 		error_page 404 /404.html;
            location = /40x.html {
    	}

    	error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
}

HTML 代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <style>
    </style>
    <script type="text/javascript">
      //用于填写发送消息的输入框
      var messageBox;
      //用于显示消息的div容器
      var messageLog;
      //WebSocket对象
      var socket;
 
      //页面加载完毕
      window.onload = function() {
        messageBox = document.getElementById('messageBox');
        messageLog = document.getElementById('messageLog');
        connect();
      }
 
      //创建socket对象并绑定所有事件
      function connect() {
        //创建socket对
        socket = new WebSocket("wss://www.url.cn/ws/websocket/10172");
 
        //监听所有的Web socket事件
        socket.onopen = connectionOpen;
        socket.onmessage = messageReceived;
        socket.onerror = errorOccurred;
        socket.onclose = connectionClosed;
      }
 
      //断开连接按钮点击
      function disconnect(){
        socket.close();
      }
 
      //发送消息按钮点击
      function sendMessage(){
        //获取要发送的数据
        var message = messageBox.value;
 
        //通过socket发送消息
        socket.send(message);
 
        //告诉用户刚刚发生了什么
        messageLog.innerHTML += "<br>发送：" + message;
      }
 
      //连接建立完毕事件响应
      function connectionOpen(e) {
        messageLog.innerHTML += "<br>--- Socket连接成功 ---";
      }
 
      //消息接收事件响应
      function messageReceived(e){
        messageLog.innerHTML += "<br>收到：" + e.data;
      }
 
      //错误事件响应
      function errorOccurred(e){
        messageLog.innerHTML += "<br>发生错误：" + e.data;
      }
 
      //连接关闭事件响应
      function connectionClosed(e) {
        messageLog.innerHTML += "<br>--- Socket连接关闭 ---";
      }
    </script>
  </head>
  <body>
    <input id="messageBox" type="text" />
    <button οnclick="sendMessage()">发送</button>
    <button οnclick="disconnect()">断开</button>
    <div id="messageLog"></div>
  </body>
</html>

遇到的问题

在这里插入图片描述

这里的请求应该把wss://www.url.cn/ws
ws 应该去掉，它只是用来匹配代理规则的，不能匹配到你的后端websocket的endpoint

在这里插入图片描述

lgoodbook

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
nginx配置websocket的问题记录

Wss Https 配置当域名是https 时必须使用wss 来连接，wss://域名/nginx 匹配规则/后端endpoint/参数map $http_upgrade $connection_upgrade { default upgrade; '' close; }upstream websocket { server 127.0.0.1:8080; keepalive 1024;}server { listen 443 ssl;
复制链接

扫一扫