{"id":19555,"date":"2018-11-29T09:00:23","date_gmt":"2018-11-29T11:00:23","guid":{"rendered":"https:\/\/king.host\/blog\/?p=19555"},"modified":"2024-09-17T22:16:52","modified_gmt":"2024-09-18T01:16:52","slug":"chats-com-socketio-no-nodejs","status":"publish","type":"post","link":"https:\/\/king.host\/blog\/tecnologia\/chats-com-socketio-no-nodejs\/","title":{"rendered":"Como criar chats com Socket.io no Node.js"},"content":{"rendered":"

Socket.Io oferece uma forma simples e eficiente de criar aplica\u00e7\u00f5es<\/strong> utilizando sockets, nesse artigo vamos criar uma aplica\u00e7\u00e3o que oferece um webchat<\/strong>, com Socket.io no Node.js.<\/p>\n

Como funciona o Socket.Io no Node.JS<\/h2>\n

SocketIO \u00e9 um framework para agilizar a constru\u00e7\u00e3o de aplica\u00e7\u00f5es real-time bidirecionais<\/strong>. Com essa ferramenta \u00e9 poss\u00edvel desenvolver rapidamente aplica\u00e7\u00f5es para interagir com usu\u00e1rios de forma din\u00e2mica.<\/p>\n

Como demonstra\u00e7\u00e3o das possibilidades que o socket io oferece, iremos montar um WebChat<\/a><\/strong> bem simples, utilizando o conte\u00fado disponibilizado na documenta\u00e7\u00e3o oficial<\/strong><\/a>, apenas com algumas modifica\u00e7\u00f5es.<\/p>\n

\"banner-kinghost\"<\/a><\/p>\n

Primeiros passos<\/h3>\n

Primeiro passo \u00e9 iniciar um aplica\u00e7\u00e3o node com npm init<\/strong>, e editar o arquivo package.json<\/strong> para se adequar ao projeto:<\/p>\n

Configurar o script start<\/strong>;
\nInformar as depend\u00eancias do projeto.<\/p>\n

{\n\"name\": \"webchat\",\n\"version\": \"0.1.0\",\n\"description\": \"Webchat utilizando socketIo\",\n\"main\": \"server.js\",\n\"scripts\": {\n    \"start\": \"node server.js\"\n},\n\"author\": \"Gabriel Petry\",\n\"license\": \"MIT\",\n\"dependencies\": {\n    \"express\": \"^4.16.4\",\n    \"socket.io\": \"^2.1.1\"\n    }\n}<\/pre>\n
Ap\u00f3s configurar o package.json podemos rodar npm install<\/strong>, assim vamos instalar as duas depend\u00eancias necess\u00e1rias o SocketIO e o Express.<\/p>\n
Com as depend\u00eancias, precisamos criar os arquivos que v\u00e3o realizar o uso do socket.io para iniciar a aplica\u00e7\u00e3o.<\/p>\n
Arquivo server.js<\/strong>, ser\u00e1 respons\u00e1vel por receber as mensagens e informar para todos os clientes conectados.<\/p>\n
\/\/ Realiza o require do express, http, e socketio\nvar app = require('express')();\n\/\/ passa o express para o http-server\nvar http = require('http').Server(app);\n\/\/ passa o http-server par ao socketio\nvar io = require('socket.io')(http);\n\n\/\/ cria uma rota para fornecer o arquivo index.html\napp.get('\/', function(req, res){\n  res.sendFile(__dirname + '\/index.html');\n});\n\/\/ sempre que o socketio receber uma conex\u00e3o vai devoltar realizar o broadcast dela\nio.on('connection', function(socket){\n  socket.on('chat message', function(msg){\n    io.emit('chat message', msg);\n  });\n});\n\n\/\/ inicia o servidor na porta informada, no caso vamo iniciar na porta 3000\nhttp.listen(3000, function(){\n  console.log('Servidor rodando em: http:\/\/localhost:3000');\n});<\/pre>\n
\"\"<\/a><\/p>\n
O arquivo index.html<\/strong>, ser\u00e1 uma p\u00e1gina html b\u00e1sica com os campos do nosso formul\u00e1rio de contato, fique livre para editar e customizar o css dessa p\u00e1gina.<\/p>\n
<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Webchat com socketIO<\/title>\n\n    <style media=\"screen\">\n        body {width: 500px; margin: 0 auto; margin-top: 2rem; }\n        .send {width: 100%; margin: 0; padding: 0; margin-top: 1rem; }\n        input.text {width: 80%; margin: 0; padding: 0; padding: 5px; }\n        .btn {padding: 5px 0; width: 82px; background-color: #eee; border: 0; margin: 0; border: solid #eee;        }\n        .btn:hover {background-color: #00e4bc}\n        ul {list-style-type: none;width: 100%;padding: 0;margin: 0;}\n        li { padding: 5px 10px; }\n        li:nth-child(odd) {background-color: #eee}\n    <\/style>\n\n\n    <!--  Lista de mensagens -->\n\n<ul class=\"ul\" id=\"messages\"><\/ul>\n\n    <!--  input com e bot\u00e3o de submit-->\n\n<div class=\"send\">\n        <input class=\"text\" autofocus=\"\" id=\"menssagem\" autocomplete=\"off\" placeholder=\"Cloud est\u00e1 em apuros!\">\n        <button class=\"btn\" id=\"enviar_menssagem\">Send<\/button>\n<\/div>\n\n\n<!--  importar o client do socketIO-->\n<script src=\"\/socket.io\/socket.io.js\"><\/script>\n<script>\n    \/\/ faz com que seja poss\u00edvel enviar mensagens com Enter\n    document.getElementById('menssagem').addEventListener('keypress', function(e) {\n        var key = e.which || e.keyCode;\n        if (key == 13) {\n            enviar_menssagem();\n        }\n    });\n    \/\/ inicia o client socketIO\n    var socket = io();\n    \/\/ Abre um popup perguntando o nome da pessoa\n    var nome_usuario = prompt(\"Qual seu nome?\");\n    \/\/ Lista com alguns nomes do Final Fantasy\n    var ff = [\n        \"Cloud Strife\",\n        \"Sephiroth\",\n        \"Vincent Valentine\",\n        \"Zack Fair\",\n        \"Aerith Gainsborough\",\n        \"Tifa Lockhart\",\n        \"Barret Wallace\",\n        \"Yuffie Kisaragi\",\n    ];\n    \/\/ Caso usu\u00e1rio n\u00e3o informe um nome ser\u00e1 atribuido um nome aleat\u00f3rio da lista\n    if (nome_usuario === null || nome_usuario == \"\" || nome_usuario == \" \") {\n        nome_usuario = ff[Math.floor(Math.random() * ff.length)];\n    }\n\n    socket.emit('chat message', \"Bem vindo! \" + nome_usuario);\n    \/\/ adiciona um addEventListener para o bot\u00e3o de submit\n    document.getElementById('enviar_menssagem').addEventListener(\"click\", enviar_menssagem);\n    \/\/ cria a fun\u00e7\u00e3o que conecta no websocket e emite a mensagem\n    function enviar_menssagem() {\n      \/\/ salva a mensagem como uma string\n      msg = document.getElementById('menssagem').value;\n      if (msg.length > 0) {\n          console.log(msg);\n          \/\/ concatena o nome de usu\u00e1rio e a mensagem para enviar ao socketIo\n          socket.emit('chat message', nome_usuario + \": \" + msg);\n          \/\/ reseta o valor do input da mensagem\n          document.getElementById('menssagem').value = \"\";\n      }\n    }\n    \/\/ sempre que receber uma mensagem ela \u00e9 adicionada a lista\n    socket.on('chat message', function(msg){\n        \/\/ busca o elemento UL\n        let ul = document.getElementById(\"messages\");\n        \/\/ cria um elemento LI\n        let li = document.createElement('li');\n        \/\/ cria o elemento de quebra de linha\n        let br = document.createElement('br');\n        li.appendChild(document.createTextNode(msg));\n        \/\/ adicionar o nome do usu\u00e1rio quebra a linha e adicionar a mensagem \u00e0 lista de mensagems\n        ul.appendChild(li);\n    });\n\n    <\/script><\/pre>\n
Tudo pronto, e agora?<\/h3>\n
Com os os arquivos criados podemos iniciar o nosso servidor de testes com o comando npm start<\/strong>.<\/p>\n
e ao acessar http:\/\/localhost:3000<\/strong><\/a> ser\u00e1 iniciado o servidor do chat.<\/p>\n
\"\"<\/p>\n
Publicando a sua aplica\u00e7\u00e3o na Internet<\/h3>\n
Agora que sua aplica\u00e7\u00e3o\u00a0com Socket.io no Node.js foi desenvolvida e est\u00e1 funcionando nos testes \u00e9 hora de publicar ela na internet<\/strong>, para isso precisamos de uma hospedagem com suporte a node.js.<\/p>\n
Esse webchat funcionar\u00e1 perfeitamente na estrutura node.js da Kinghost<\/strong>, para realizar o deploy da aplica\u00e7\u00e3o pode seguir o nosso guia na Central de Ajuda KingHost.<\/strong><\/a><\/p>\n
\"\"<\/a><\/p>\n
Fique ligado no Blog da KingHost<\/a><\/strong> para mais novidades.<\/p>\n","protected":false},"excerpt":{"rendered":"
Socket.Io oferece uma forma simples e eficiente de criar aplica\u00e7\u00f5es utilizando sockets, nesse artigo vamos criar uma aplica\u00e7\u00e3o que oferece um webchat, com Socket.io no Node.js. Como funciona o Socket.Io no Node.JS SocketIO \u00e9 um framework para agilizar a constru\u00e7\u00e3o de aplica\u00e7\u00f5es real-time bidirecionais. Com essa ferramenta \u00e9 poss\u00edvel desenvolver rapidamente aplica\u00e7\u00f5es para interagir com […]<\/p>\n","protected":false},"author":343,"featured_media":19583,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1179,1327,8],"tags":[1355],"class_list":["post-19555","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-hospedagem-node-js","category-tecnologia","tag-nodejs"],"_links":{"self":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/19555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/users\/343"}],"replies":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/comments?post=19555"}],"version-history":[{"count":12,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/19555\/revisions"}],"predecessor-version":[{"id":39701,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/posts\/19555\/revisions\/39701"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media\/19583"}],"wp:attachment":[{"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/media?parent=19555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/categories?post=19555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/king.host\/blog\/wp-json\/wp\/v2\/tags?post=19555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}