🚀 Conexão kInghost: Aulas online e gratuitas para fazer o seu negócio evoluir no digital 💰

Kinghost | Blog

Como criar chats com Socket.io no Node.js

Publicado em 29/11/2018

Atualizado em 03/06/2024
socket.io no node.js

Socket.Io oferece uma forma simples e eficiente de criar aplicações utilizando sockets, nesse artigo vamos criar uma aplicação que oferece um webchat, com Socket.io no Node.js.

Como funciona o Socket.Io no Node.JS

SocketIO é um framework para agilizar a construção de aplicações real-time bidirecionais. Com essa ferramenta é possível desenvolver rapidamente aplicações para interagir com usuários de forma dinâmica.

Como demonstração das possibilidades que o socket io oferece, iremos montar um WebChat bem simples, utilizando o conteúdo disponibilizado na documentação oficial, apenas com algumas modificações.

Primeiros passos

Primeiro passo é iniciar um aplicação node com npm init, e editar o arquivo package.json para se adequar ao projeto:

Configurar o script start;
Informar as dependências do projeto.

{
"name": "webchat",
"version": "0.1.0",
"description": "Webchat utilizando socketIo",
"main": "server.js",
"scripts": {
    "start": "node server.js"
},
"author": "Gabriel Petry",
"license": "MIT",
"dependencies": {
    "express": "^4.16.4",
    "socket.io": "^2.1.1"
    }
}

Após configurar o package.json podemos rodar npm install, assim vamos instalar as duas dependências necessárias o SocketIO e o Express.

Com as dependências, precisamos criar os arquivos que vão realizar o uso do socket.io para iniciar a aplicação.

Arquivo server.js, será responsável por receber as mensagens e informar para todos os clientes conectados.

// Realiza o require do express, http, e socketio
var app = require('express')();
// passa o express para o http-server
var http = require('http').Server(app);
// passa o http-server par ao socketio
var io = require('socket.io')(http);

// cria uma rota para fornecer o arquivo index.html
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
// sempre que o socketio receber uma conexão vai devoltar realizar o broadcast dela
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

// inicia o servidor na porta informada, no caso vamo iniciar na porta 3000
http.listen(3000, function(){
  console.log('Servidor rodando em: http://localhost:3000');
});

banner contato comercial novo negocio

O arquivo index.html, será uma página html básica com os campos do nosso formulário de contato, fique livre para editar e customizar o css dessa página.

<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>Webchat com socketIO</title>

    <style media="screen">
        body {width: 500px; margin: 0 auto; margin-top: 2rem; }
        .send {width: 100%; margin: 0; padding: 0; margin-top: 1rem; }
        input.text {width: 80%; margin: 0; padding: 0; padding: 5px; }
        .btn {padding: 5px 0; width: 82px; background-color: #eee; border: 0; margin: 0; border: solid #eee;        }
        .btn:hover {background-color: #00e4bc}
        ul {list-style-type: none;width: 100%;padding: 0;margin: 0;}
        li { padding: 5px 10px; }
        li:nth-child(odd) {background-color: #eee}
    </style>


    <!--  Lista de mensagens -->

<ul class="ul" id="messages"></ul>

    <!--  input com e botão de submit-->

<div class="send">
        <input class="text" autofocus="" id="menssagem" autocomplete="off" placeholder="Cloud está em apuros!">
        <button class="btn" id="enviar_menssagem">Send</button>
</div>


<!--  importar o client do socketIO-->
<script src="/socket.io/socket.io.js"></script>
<script>
    // faz com que seja possível enviar mensagens com Enter
    document.getElementById('menssagem').addEventListener('keypress', function(e) {
        var key = e.which || e.keyCode;
        if (key == 13) {
            enviar_menssagem();
        }
    });
    // inicia o client socketIO
    var socket = io();
    // Abre um popup perguntando o nome da pessoa
    var nome_usuario = prompt("Qual seu nome?");
    // Lista com alguns nomes do Final Fantasy
    var ff = [
        "Cloud Strife",
        "Sephiroth",
        "Vincent Valentine",
        "Zack Fair",
        "Aerith Gainsborough",
        "Tifa Lockhart",
        "Barret Wallace",
        "Yuffie Kisaragi",
    ];
    // Caso usuário não informe um nome será atribuido um nome aleatório da lista
    if (nome_usuario === null || nome_usuario == "" || nome_usuario == " ") {
        nome_usuario = ff[Math.floor(Math.random() * ff.length)];
    }

    socket.emit('chat message', "Bem vindo! " + nome_usuario);
    // adiciona um addEventListener para o botão de submit
    document.getElementById('enviar_menssagem').addEventListener("click", enviar_menssagem);
    // cria a função que conecta no websocket e emite a mensagem
    function enviar_menssagem() {
      // salva a mensagem como uma string
      msg = document.getElementById('menssagem').value;
      if (msg.length > 0) {
          console.log(msg);
          // concatena o nome de usuário e a mensagem para enviar ao socketIo
          socket.emit('chat message', nome_usuario + ": " + msg);
          // reseta o valor do input da mensagem
          document.getElementById('menssagem').value = "";
      }
    }
    // sempre que receber uma mensagem ela é adicionada a lista
    socket.on('chat message', function(msg){
        // busca o elemento UL
        let ul = document.getElementById("messages");
        // cria um elemento LI
        let li = document.createElement('li');
        // cria o elemento de quebra de linha
        let br = document.createElement('br');
        li.appendChild(document.createTextNode(msg));
        // adicionar o nome do usuário quebra a linha e adicionar a mensagem à lista de mensagems
        ul.appendChild(li);
    });

    </script>

Tudo pronto, e agora?

Com os os arquivos criados podemos iniciar o nosso servidor de testes com o comando npm start.

e ao acessar http://localhost:3000 será iniciado o servidor do chat.

telas conversando

Publicando a sua aplicação na Internet

Agora que sua aplicação com Socket.io no Node.js foi desenvolvida e está funcionando nos testes é hora de publicar ela na internet, para isso precisamos de uma hospedagem com suporte a node.js.

Esse webchat funcionará perfeitamente na estrutura node.js da Kinghost, para realizar o deploy da aplicação pode seguir o nosso guia na Central de Ajuda KingHost.

cta js

Fique ligado no Blog da KingHost para mais novidades.

O que você achou deste conteúdo?

O que você achou deste conteúdo?

Gabriel

Gabriel Petry

Geek, fascinado por Linux e programas Open Source.

Gabriel

Gabriel Petry

Geek, fascinado por Linux e programas Open Source.

Compartilhe esse conteúdo com alguém que possa gostar também

Receba todo mês conteúdos
incríveis como esses para
seguir evoluindo

Conteúdos relacionados

Você pode até não perceber, mas as aplicações web já se tornaram parte da sua rotina. Diariamente, você acessa informações, realiza negócios e se comunica por meio dessas aplicações. Isso mesmo, desde plataformas de e-commerce que facilitam compras online até redes sociais que conectam bilhões de pessoas globalmente, as aplicações web desempenham um papel fundamental...

📅 Aulão GRATUITO 🚀 Como VENDER MAIS na internet 💰

Mensagens para você