📅 Conexão KingHost 🚀 Conteúdos exclusivos para 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 09/02/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

Conteúdos relacionados

As ameaças virtuais estão mudando constantemente e se tornando cada dia mais sofisticadas. Por isso, para quem tem um negócio online, a segurança é um ponto que merece grande atenção. De acordo com o Relatório do Sitelock que analisou 14 milhões de sites em 2022, sites recebem cerca de 5.5 vezes mais tráfego de bots...

Assine a nossa newsletter e receba conteúdos para apoiar o crescimento do seu negócio

Sem Título(obrigatório)

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

Mensagens para você