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?
