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 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?
    • By MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
    • By JoaoVituBR
      Olá, eu tenho 2 servidores com IP diferentes e usuários distribuídos entre os dois

      eu gostaria de saber oque eu posso fazer para que o usuário que esta conectado no servidor 1 possa se comunicar com o usuário que está no servidor 2 sem usar MySql.
    • By Muloo
      Olá, bom dia, boa tarde ou boa noite, estou tendo um problema, com um sistema que estou criando, agradeço a quem puder ajudar. Então, esse sistema basicamente passa um "protocolo" para os servidor e ele retorna um objeto, e vice-versa, porém, ao finalizar o cliente e reabrir sem fazer o mesmo com o servidor, é causado um erro no servidor, e ao tentar fazer algum retorno de um objeto após re-abrir o cliente é causado um erro.
      Erro no server ao fechar o cliente:

      java.net.SocketException: Connection reset     at java.net.SocketInputStream.read(SocketInputStream.java:210)     at java.net.SocketInputStream.read(SocketInputStream.java:141)     at sun.nio.cs.StreamDecoder.readBytes(StreamDecoder.java:284)     at sun.nio.cs.StreamDecoder.implRead(StreamDecoder.java:326)     at sun.nio.cs.StreamDecoder.read(StreamDecoder.java:178)     at java.io.InputStreamReader.read(InputStreamReader.java:184)     at java.io.BufferedReader.fill(BufferedReader.java:161)     at java.io.BufferedReader.readLine(BufferedReader.java:324)     at java.io.BufferedReader.readLine(BufferedReader.java:389)     at main.java.Manager.run(Manager.java:45)
      Erro no cliente ao reabrir e tentar obter o objeto:

      java.io.StreamCorruptedException: invalid stream header: 73720013     at java.io.ObjectInputStream.readStreamHeader(ObjectInputStream.java:866)     at java.io.ObjectInputStream.<init>(ObjectInputStream.java:358)     at main.java.controllers.VendedoresUI.load(VendedoresUI.java:69)     at main.java.controllers.VendedoresUI.initialize(VendedoresUI.java:54)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2548)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2441)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3214)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3175)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3148)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3124)     at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:3104)     at javafx.fxml.FXMLLoader.load(FXMLLoader.java:3097)     at main.java.controllers.Controller.loadUI(Controller.java:150)     at main.java.controllers.Controller.changeUI(Controller.java:111)     at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)     at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)     at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)     at java.lang.reflect.Method.invoke(Method.java:498)     at sun.reflect.misc.Trampoline.invoke(MethodUtil.java:71)     at sun.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)     at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)     at java.lang.reflect.Method.invoke(Method.java:498)     at sun.reflect.misc.MethodUtil.invoke(MethodUtil.java:275)     at javafx.fxml.FXMLLoader$MethodHandler.invoke(FXMLLoader.java:1769)     at javafx.fxml.FXMLLoader$ControllerMethodEventHandler.handle(FXMLLoader.java:1657)     at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86)     at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)     at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)     at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)     at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)     at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)     at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)     at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)     at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)     at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)     at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)     at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)     at javafx.event.Event.fireEvent(Event.java:198)     at javafx.scene.Scene$ClickGenerator.postProcess(Scene.java:3470)     at javafx.scene.Scene$ClickGenerator.access$8100(Scene.java:3398)     at javafx.scene.Scene$MouseHandler.process(Scene.java:3766)     at javafx.scene.Scene$MouseHandler.access$1500(Scene.java:3485)     at javafx.scene.Scene.impl_processMouseEvent(Scene.java:1762)     at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.java:2494)     at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:394)     at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:295)     at java.security.AccessController.doPrivileged(Native Method)     at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMouseEvent$353(GlassViewEventHandler.java:432)     at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389)     at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(GlassViewEventHandler.java:431)     at com.sun.glass.ui.View.handleMouseEvent(View.java:555)     at com.sun.glass.ui.View.notifyMouse(View.java:937)     at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)     at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)     at java.lang.Thread.run(Thread.java:748)
      1. Classes do server:
      1.1. Server.java

      public class Server extends Thread{     public Server(){}     public void run() {         try{             ServerSocket listener = new ServerSocket(4444);             listener.setSoTimeout(0);             System.out.println("Server is now running");             try {                 while (true) {                     Socket socket = listener.accept();                     new Manager(socket).start();                 }             } finally {                 listener.close();             }         } catch (IOException ioexception){             System.out.println("\u001B[31mError opening server, more info: ");             System.out.println(ioexception);             System.out.println("Closing server...");             System.exit(0);         }     } }
      1.2. Manager.java

      public class Manager extends Thread{     private Socket socket;     private BufferedReader in;     private PrintWriter out;     public Manager(Socket socket){         this.socket = socket;         System.out.println("\u001B[32m" + socket.getLocalAddress() + ":" + socket.getPort() + " connected");     }     @Override     public void run() {         try {             out = new PrintWriter(socket.getOutputStream(), true);             out.println("Connected");             while(true) {                 ObjectOutputStream objectOutput = new ObjectOutputStream(socket.getOutputStream());                 in = new BufferedReader(new InputStreamReader(socket.getInputStream()));                 if(in.readLine().contains(Protocols.VENDEDOR_GET_ALL)) {                     ResultSet res = SQLManager.Query("SELECT * FROM vendedores");                     List<Vendedor> list = new ArrayList<>();                     while (res.next()) {                         Vendedor vendedor = new Vendedor();                         vendedor.setNOME(res.getString("NOME"));                         vendedor.setCPF(res.getString("CPF"));                         vendedor.setCONTATO(res.getString("CONTATO"));                         vendedor.setCONTA(res.getInt("CONTA"));                         vendedor.setBANCO(res.getInt("BANCO"));                         vendedor.setAGENCIA(res.getString("AGENCIA"));                         vendedor.setCORRENTE(res.getString("CORRENTE"));                         list.add(vendedor);                     }                     objectOutput.writeObject(list);                 }                 objectOutput.flush();             }         } catch (IOException e) {             System.out.println("\u001B[31m" + socket.getLocalAddress() + ":" + socket.getPort() + " disconnected");             e.printStackTrace();             interrupt();         } catch (SQLException | ClassNotFoundException e) {             Logger.getLogger(Manager.class.getName()).log(Level.SEVERE, null, e);         }     } }
      2. Classes do Client
      2.1. ClientSocket.java

      public class ClientSocket {     private static Socket socket = null;     private static BufferedReader in;     private static PrintWriter out;     public static void load(){         try {             socket = new Socket("127.0.0.1", 4444);             in = new BufferedReader(                     new InputStreamReader(socket.getInputStream()));             out = new PrintWriter(socket.getOutputStream(), true);             System.out.print(ClientSocket.getIn().readLine());         } catch(IOException ioexception){             Logger.getLogger(ClientSocket.class.getName()).log(Level.SEVERE, null, ioexception);         }     }     public static Socket getSocket() {         return socket;     }     public static BufferedReader getIn() {         return in;     }     public static PrintWriter getOut() {         return out;     } }
      2.2 VendedoresUI.java

      public class VendedoresUI implements Initializable {     @FXML     private TableView<Vendedor> table;     @FXML     private TableColumn<?, ?> colName;     @FXML     private TableColumn<?, ?> colCPF;     @FXML     private TableColumn<?, ?> colContato;     @FXML     private TableColumn<?, ?> colConta;     @FXML     private TableColumn<?, ?> colBanco;     @FXML     private TableColumn<?, ?> colAgencia;     @FXML     private TableColumn<?, ?> colCorrente;     ObservableList<Vendedor> list;     @Override     public void initialize(URL location, ResourceBundle resources) {         load();     }     private void load(){         try {             if(ClientSocket.getSocket().isClosed()){                 ClientSocket.load();             }             PrintWriter escritor = new PrintWriter(ClientSocket.getSocket().getOutputStream(), true);             escritor.println(Protocols.VENDEDOR_GET_ALL);             ObjectInputStream obi = new ObjectInputStream(ClientSocket.getSocket().getInputStream());             List<Vendedor> mList = (List<Vendedor>) obi.readObject();             list = FXCollections.observableArrayList(mList);             colName.setCellValueFactory(new PropertyValueFactory<>("NOME"));             colCPF.setCellValueFactory(new PropertyValueFactory<>("CPF"));             colContato.setCellValueFactory(new PropertyValueFactory<>("CONTATO"));             colConta.setCellValueFactory(new PropertyValueFactory<>("CONTA"));             colBanco.setCellValueFactory(new PropertyValueFactory<>("BANCO"));             colAgencia.setCellValueFactory(new PropertyValueFactory<>("AGENCIA"));             colCorrente.setCellValueFactory(new PropertyValueFactory<>("CORRENTE"));             table.setItems(list);         } catch (IOException | ClassNotFoundException e) {             e.printStackTrace();         }     } }
×

Important Information

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