Jump to content
Gilberto Jr

CHAT SOCKET.IO NODE JS

Recommended Posts

Boa noite.

Eu fiz esse chat usando socket.io com NODE JS.

Esta funcionando perfeito. 

 

Porem eu queria implementar duas coisas nele.

Queria que quando chegasse uma mensagem, aparecesse uma notificação informando o nome da pessoa que enviou, e também parte da mensagem.

 

E também, quando chegasse uma mensagem, mudar o TITTLE do HTML pra parte da mensagem.

 

Mas isso deve acontecer, somente no browser das pessoas que receberem a mensagem. A pessoa que enviou, não deve receber a notificação e também o nem deve mudar o TITLE da pagina HTML.

 

Abaixo segue o código do FRONT END.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Chat Sistema Distribuido</title>

    <script src="jquery.min.js"></script>
    <script src="socket.io.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <form id="chat">

            <input type="text" name="username" placeholder="Digite seu usuário">
                <div class="messages"></div>
            <input type="text" name="message" placeholder="Digite sua mensagem">
            <button type="submit">Enviar</button>

    </form>

    
    <script type="text/javascript">
        var socket = io('http://localhost:3000');

        function renderMessage(message){
            $('.messages').append('<div class="message"><strong>'+ message.author +'</strong>:<br/>&nbsp&nbsp'+ message.message +'</div>')
        };

        socket.on('previousMessages', function(messages){
            for(message of messages){
                renderMessage(message);
            };
        });

        socket.on('receivedMessage', function(message){
            renderMessage(message);
        });

        $('#chat').submit(function(event){
            event.preventDefault();

            var author = $('input[name=username]').val();
            var message = $('input[name=message]').val();

            if(author.length && message.length){
                var messageObject = {
                    author: author,
                    message: message,
                };

                renderMessage(messageObject);
                socket.emit('sendMessage', messageObject);
            }
        });
    </script>
</body>
</html>

 

Abaixo o código da pagina server.js

const express = require('express');
const path = require('path');

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', path.join(__dirname, 'public'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');


app.use('/', (req, res) => {
    res.render('index.html');
});

let messages = [];

io.on('connection', socket => {
    console.log(`Socket Conectado: ${socket.id}`);

    socket.emit('previousMessages', messages);

    socket.on('sendMessage', data =>{
        messages.push(data);
        socket.broadcast.emit('receivedMessage', data);

    });
});

server.listen(3000);

Se alguém puder me ajudar.

 

Obrado

Gilberto Jr

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By rodbacana
      Sou novo no mundo do java script e agora venho estudando o node.
       
      Preciso criar uma api rest, e na mesma tenho que conseguir fazer os seguintes cálculos:
       
      Somar um vetor de inteiros.
      Criar uma média aritmética de um vetor de inteiros.
       
      Devo modelar a api como mostra a imagem em anexo.
       
      Alguém pode por favor, me ensinar como faço isso  ? 

    • By agodiniz
      Fala galera, estou com um problema e não sei como resolver. Até encontrei umas respostas, mas utilizando Php e Mysql. Preciso que a resposta seja utilizando as tecnologias javascript (node) e Mysql.
      Gostaria de capturar dados de um formulário utilizando array e salvando o mesmo num banco de dados.
       
      Ex:
      Imagine um 3 inputs do tipo text que recebem um valor que é inserido pelo cliente e que cada input, possa receber valores diferentes (como se cada um fosse uma variável 'titulo', 'conteudo' e 'autor')
      quero que depois que o cliente enviar os dados que por ele foram inputados, esses dados sejam enviados para as variáveis 'titulo', 'conteudo' e 'autor'.
      Logo depois quero declarar um array que receba essas variáveis [titulo, conteudo, autor] e desejo armazenar o array no banco de dados utilizando Mysql
       
      Desde já, agradeço!
    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By MateusOFCZ
      Olá, gostaria de saber, como posso fazer para quando clicar em um botão, por exemplo, em um formulário JFrame (Java) ele executar um comando node.js, fiz o código javascript no Visual Studio Code, e quero fazer um executável para executar o script e fazer a leitura dos dados... Alguém pode me ajudar?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.