Jump to content
php.lv forumi
  • 0

Nginx + node.js + socket.io


Question

Sveiki!

Nekādi netieku skaidrībā kas par problēmu. Visādi izmēģinājos!

Digitalocen droplet 

 

 

Quote

2021/02/06 01:07:00 [error] 728#728: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 77.219.0.204, server: domens.lv, request: "GET /socket.io/?EIO=4&transport=polling&t=NTqu5wj HTTP/1.1", upstream: "http://127.0.0.1:3000/socket.io/?EIO=4&transport=polling&t=NTqu5wj", host: "domens.lv", referrer: "https://domens.lv/"

Nginx default

Quote

server {

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name domens.lv www.domens.lv;
    
        location /socket.io/ {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
            proxy_set_header Host $host;
            proxy_pass http://localhost:3000/socket.io/;
        }
       
    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_read_timeout 96000;
                proxy_cache_bypass $http_upgrade;
               }

                listen [::]:443 ssl ipv6only=on; # managed by Certbot
                listen 443 ssl; # managed by Certbot
                ssl_certificate /etc/letsencrypt/live/domens.lv/fullchain.pem; # managed by Certbot
                ssl_certificate_key /etc/letsencrypt/live/domens.lv/privkey.pem; # managed by Certbot
                include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
                ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

server {
    if ($host = www.domens.lv) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = domens.lv) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80 default_server;
    listen [::]:80 default_server;

    server_name domens.lv www.domens.lv;
    return 404; # managed by Certbot
}

Nginc conf

Quote

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}


http {


    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
    ssl_prefer_server_ciphers on;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    gzip on;


    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;
}

script.js

Quote

// connect to main namespace
const socket = io('/');

const conversation = document.querySelector('.conversation');

let alreadyTyping = false;

// change the number of online
socket.on('numberOfOnline', size => {
    document.querySelector('.online').innerHTML = `${size.toLocaleString()} čatotāji`
});

// event listener for search
document.querySelector('#start').addEventListener('click', () => {
    // searching for someone to talk to
    socket.emit('start', socket.id);
});

// display searching message
socket.on('searching', msg => {
    // add the searching message to our html
    conversation.innerHTML = `<div class="message">${msg}</div>`;
});

// found someone
// start of their chat
socket.on('chatStart', msg => {
    // add the message to our html that a user has found
    conversation.innerHTML = `<div class="message">${msg}</div>`;

    // remove the hide class of stop button
    document.querySelector('#stop').classList.remove('hide');

    // hide start button
    document.querySelector('#start').classList.add('hide');

    // remove disabled attribute in textarea
    document.querySelector('#text').disabled = false;

    // remove disabled attribute in send button
    document.querySelector('#send').disabled = false;
});

// event listener for form submit
document.querySelector('.form').addEventListener('submit', e => {
    e.preventDefault();
    submitMessage();
});

// event listener when user press enter key
document.querySelector('#text').onkeydown = e => {
    // enter key is pressed without shift key
    if(e.keyCode === 13 && !e.shiftKey) {
        e.preventDefault();
        submitMessage();
    }
}

// event listener when user is typing
document.querySelector('#text').addEventListener('input', e => {
    if(!alreadyTyping) {
        // emit message to server that a stranger is typing
        socket.emit('typing', 'Svešinieks raksta...');

        alreadyTyping = true;
    }

    // check if user is not typing
    if(e.target.value === '') {
        socket.emit('doneTyping');

        alreadyTyping = false;
    }
});

// event listener when textarea is not focused
document.querySelector('#text').addEventListener('blur', () => {
    socket.emit('doneTyping');

    alreadyTyping = false;
});

// event listener when textarea is clicked
//document.querySelector('#text').addEventListener('click', e => {
    // check if value is not empty
    //if(e.target.value !== '') {
        // emit message to server that a stranger is typing
       // socket.emit('typing', 'Stranger is typing...');

       // alreadyTyping = true;
    //}
//});

// receive the message from server then add it to html
socket.on('newMessageToClient', data => {
    const notStranger = data.id === socket.id;

    conversation.innerHTML += `
        <div class="chat">
            <span class="${notStranger ? 'name blue' : 'name red'}">${notStranger ? 'Es: ' : 'Svešinieks: '} </span>
            <span class="text">${data.msg}</span>
        </div>
    `;

    // scroll to the bottom of the conversation
    conversation.scrollTo(0, conversation.scrollHeight);
});

// message when someome is typing
socket.on('strangerIsTyping', msg => {
    // add the message to html
    conversation.innerHTML += conversation.innerHTML = `<div class="message typing">${msg}</div>`;

    // scroll conversation to bottom
    conversation.scrollTo(0, conversation.scrollHeight);
});

// remove the Stranger is typing... message
socket.on('strangerIsDoneTyping', () => {
    const typing = document.querySelector('.typing');

    if(typing) {
        typing.remove();
    }
});

// message when someone disconnect
socket.on('goodBye', msg => {
    conversation.innerHTML += `<div class="message">${msg}</div>`;

    reset();
});

// stop button
document.querySelector('#stop').addEventListener('click', () => {
    // hide stop button
    document.querySelector('#stop').classList.add('hide');

    // show really button
    document.querySelector('#really').classList.remove('hide');
});

// really button
document.querySelector('#really').addEventListener('click', () => {
    // stop conversation
    socket.emit('stop');
});

// display message when stranger disconnect
socket.on('strangerDisconnected', msg => {
    conversation.innerHTML += `<div class="message">${msg}</div>`;

    reset();
});

// display message when current user disconnect
socket.on('endChat', msg => {
    conversation.innerHTML += `<div class="message">${msg}</div>`;

    reset();
});

function submitMessage() {
    // get the input
    const input = document.querySelector('#text');

    // check if input is not an empty string
    if(/\S/.test(input.value)) {
        // emit to server that the user is done typing
        socket.emit('doneTyping');

        // emit the value of input to server
        socket.emit('newMessageToServer', input.value);

        // clear the value of input
        input.value = '';

        // set alreadyTyping back to false
        alreadyTyping = false;
    }
}

function reset() {
    // remove the hide class of start  button
    document.querySelector('#start').classList.remove('hide');

    // hide stop button
    document.querySelector('#stop').classList.add('hide');

    // hide really button
    document.querySelector('#really').classList.add('hide');

    const text = document.querySelector('#text');

    // add disabled attribute in textarea
    text.disabled = true;

    text.value = '';

    // add disabled attribute in send button
    document.querySelector('#send').disabled = true;

    // remove Stranger is typing... message if exists
    const typing = document.querySelector('.typing');

    if(typing) {
        typing.remove();
    }

    alreadyTyping = false;

    // scroll conversation to bottom
    conversation.scrollTo(0, conversation.scrollHeight);
}

Index.html

Quote

    <script src='/socket.io/socket.io.js'></script>
    <script src='./script.js'></script>

 

Paldies!

Edited by Blumish
Link to post
Share on other sites

7 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...