dro80463 2016-05-12 13:24
浏览 103
已采纳

将Socket.io与PHP Web应用程序和Nginx集成

I'm currently working on a mobile app that includes chat. The API backend is built with Laravel, but for the chat we're going to use Socket.io. We're using an SSL certificate from Let's Encrypt

I'm having trouble getting Socket.io working. It does seem to connect because on page load the 'New connection' message appears to show up in the console in the browser, but any messages I send don't seem to be received. I think the Nginx config is probably incorrect.

Here's the chat script in its current minimal form:

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

io.on('connection', function (socket) {
  io.emit('connected', {'msg': 'Someone has connected'});

  socket.on('messsage', function (data) {
    io.emit('relaymessage', data);
  });

  socket.on('disconnect', function () {
    io.emit('disconnected');
  });
});

And the client-side implementation:

<!DOCTYPE html>
<html>
    <head>
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">

        <style>
            html, body {
                height: 100%;
            }

            body {
                margin: 0;
                padding: 0;
                width: 100%;
                display: table;
                font-weight: 100;
                font-family: 'Lato';
            }

            .container {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
            }

            .content {
                text-align: center;
                display: inline-block;
            }

            .title {
                font-size: 96px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <div class="title">Chat</div>
                <div id="output"></div>
                <form>
                    <textarea id="message"></textarea>
                    <button id="submit">Submit</button>
                </form>
            </div>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.min.js"></script>>
        <script type="text/javascript" src="/client.js"></script>>
        <script type="text/javascript">
            var socket = io(window.location.href);
            var txt = document.getElementById('message');
            var btn = document.getElementById('submit');
            socket.on('connected', function (data) {
                console.log('New connection');
            });
            socket.on('relaymessage', function (data) {
                console.log(data);
                $('div#output').append('<p>' + data.content + '</p>');
            });
            socket.on('disconnected', function () {
                console.log('Disconnected');
            });
            $('button#submit').on('click', function (event) {
                event.preventDefault();
                var content = $('textarea#message').val();
                socket.emit('message', { content: content });
                $('textarea#message').val('');
            });
        </script>>
    </body>
</html>

Here's my Nginx config:

server {
    listen         80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com;
    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com.com/privkey.pem;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
    client_max_body_size 50M;
    server_tokens off;
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-Content-Type-Options nosniff;
    add_header X-XSS-Protection "1; mode=block";

    root /var/www/public;
    index index.php index.html index.htm;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip on;
        gzip_proxied any;
        gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml-rss text/javascript text/js application/json;
        expires 1y;
        charset utf-8;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location /socket.io/ {
        proxy_pass http://localhost:9000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    }

    location ~ /.well-known {
        root /var/www/public;
        allow all;
    }   
}

Any idea as to what's gone awry?

  • 写回答

1条回答 默认 最新

  • duandu1377 2016-05-15 18:41
    关注

    Solved it in the end. First problem was that QUEUE_DRIVER and BROADCAST_DRIVER were both set to redis, which broke the broadcasting system - it used PUSH instead of PUBLISH. I therefore removed QUEUE_DRIVER and the messages were being received correctly.

    The chat script needed to use HTTPS and load the SSL certificate:

    var fs = require('fs');
    var pkey = fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem');
    var pcert = fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem')
    var options = {
      key: pkey,
      cert: pcert
    };
    var app = require('https').createServer(options);
    var io = require('socket.io')(app);
    var Redis = require('ioredis');
    var redis = new Redis();
    app.listen(9000, function() {
        console.log('Server is running!');
    });
    function handler(req, res) {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.writeHead(200);
        res.end('');
    }
    io.on('connection', function(socket) {
        //
    });
    redis.psubscribe('*', function(err, count) {
        //
    });
    redis.on('pmessage', function(subscribed, channel, message) {
        message = JSON.parse(message);
        console.log('Channel is ' + channel + ' and message is ' + message);
        io.emit(channel, message.data);
    });
    

    The client-side implementation needed to use the secure parameter:

    var url = window.location.protocol + '//' + window.location.hostname;
    var socket = io(url, {
      'secure': true,
      'reconnect': true,
      'reconnection delay': 500,
      'max reconnection attempts': 10
    });
    var chosenEvent = 'room_' + room.id;
    socket.on(chosenEvent, function (data) {
      console.log(data);
    });
    

    Once I'd made those changes, it worked fine.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 Python安装cvxpy库出问题
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥15 python天天向上类似问题,但没有清零
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题