javascript - 如何使用 Nginx 服务器配置 Web 套接字？

Question

我正在使用 Nginx 服务器运行 node.js 和 socket.io。 这是我的/etc/nginx/conf.d/site.conf:

server {
   listen 443;
   server_name localhost;

   client_max_body_size 20M;

   location /websocket/ {
               root ChatWithSocket;
               index index.html index.htm index.nginx-debian.html;
               proxy_pass http://localhost:4000;
               proxy_http_version 1.1;
               proxy_set_header Upgrade $http_upgrade;
               proxy_set_header Connection 'upgrade';
               proxy_set_header Host $host;
               proxy_cache_bypass $http_upgrade;
 }


}

这是我的/ChatWithSocket/index.js:

var express = require('express');
var socket = require('socket.io');

// App setup
var app = express();
var server = app.listen(4000, function(){
    console.log('listening for requests on port 4000,');
});

// Static files
app.use(express.static('public'));

//Socket setup
var io = socket(server);

io.on('connection', function(socket){
    console.log('made socket connection', socket.id);

    //Show diconnect log when we refresh page
    socket.on('disconnect', function(){
        console.log('The socket disconnected');
    }); 

    // Handle chat event
    socket.on('chat', function(data){
        // console.log(data);
        io.sockets.emit('chat', data);
    });

    // Handle typing event
    socket.on('typing', function(data){
        socket.broadcast.emit('typing', data);
    });
});

这是我的/ChatWithSocket/public/chat.js:

// Make connection
var socket = io.connect('http://localhost:4000');

// Query DOM
var message = document.getElementById('message'),
      handle = document.getElementById('handle'),
      btn = document.getElementById('send'),
      output = document.getElementById('output'),
      feedback = document.getElementById('feedback'),
      chatWindow = document.getElementById('chat-window');
......................................................

T

我无法使用地址 https://localhost/websocket/.I 运行看了很多网上的攻略说Nginx + WebSocket，但是不知道哪里错了。请帮助我。

Answer 1

使用此配置并重试。您不需要更新 proxy_pass localhost:4000 --> proxy_pass 40.115.176.82:4000。这是不正确的。问题出在客户身上。

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

server {
   listen 443;
   server_name localhost;

   client_max_body_size 20M;

   # smart-shingi log_format data >>
   if ($http_token ~ "(\S{10})$") {
       set $h_token $1;
   }
   # << smart-shingi log_format data

   error_page  500 502 503 504  /50x.html;
   location = /50x.html {
       root  /usr/share/nginx/html;
   }

   location / {
       deny  all;
   }

   location ~ /\. {
       deny  all;
   }

   location = /favicon.ico {
       error_page     404 = @favicon;
       access_log     off;
       log_not_found  off;
   }

   location @favicon {
       empty_gif;
       access_log     off;
       log_not_found  off;
   }

   location /drive/ {
       root   /usr/share/nginx/webapp;
       index  login.html;
       allow  all;
   }


   location /websocket/ {
    proxy_pass http://localhost:4000;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;  # pass the host header - http://wiki$
    proxy_http_version 1.1;  # recommended with keepalive connections $

    ### WebSocket proxying - from http://nginx.org/en/docs/http/websocke$
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

   location ~ \.txt {
       root    /usr/share/nginx/androidApp;
   }
}

然后在客户端尝试

// Make connection
var socket = io('https://40.115.176.82', {path: ' /websocket/'})

// Query DOM
var message = document.getElementById('message'),
      handle = document.getElementById('handle'),
      btn = document.getElementById('send'),
      output = document.getElementById('output'),
      feedback = document.getElementById('feedback'),
      chatWindow = document.getElementById('chat-window');

还要检查您使用的是哪个版本的 socketio。