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