{"id":18004935,"url":"https://github.com/suissa/socket.io-manual","last_synced_at":"2025-07-09T13:11:12.705Z","repository":{"id":26746332,"uuid":"30204079","full_name":"suissa/socket.io-manual","owner":"suissa","description":"Manual do Socket.io","archived":false,"fork":false,"pushed_at":"2016-03-15T10:03:54.000Z","size":994,"stargazers_count":15,"open_issues_count":7,"forks_count":7,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-02-09T20:42:26.739Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/suissa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-02T19:28:58.000Z","updated_at":"2019-08-13T16:02:05.000Z","dependencies_parsed_at":"2022-06-27T13:03:29.375Z","dependency_job_id":null,"html_url":"https://github.com/suissa/socket.io-manual","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suissa%2Fsocket.io-manual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suissa%2Fsocket.io-manual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suissa%2Fsocket.io-manual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/suissa%2Fsocket.io-manual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/suissa","download_url":"https://codeload.github.com/suissa/socket.io-manual/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247159515,"owners_count":20893633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-30T00:16:55.967Z","updated_at":"2025-04-04T10:27:55.777Z","avatar_url":"https://github.com/suissa.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](http://faunaurbana.com.br/wp-content/uploads/2014/10/pedagios-paulistas-junho.jpg)\n\n##O que é?\n\n\n##Criando um chat\n\nCriar um chat com socket.io é como se fosse um Hello World, além de ser altamente usado no mundo real, ainda é o primeiro exemplo que os desenvolvedores fazem, então mãos a obra.\n\n###Criando servidor web\nPrimeiramente vamos criar uma aplicação express bem simples, para isso vamos criar seu package.json, você pode usar o comando `npm init` para isso e ele precisa ficar igual a esse:\n\n```js\n{\n  \"name\": \"socket-chat-exemplo\",\n  \"version\": \"0.0.1\",\n  \"description\": \"Meu primeiro app em socket.io\",\n  \"dependencies\": {}\n}\n```\n\nDepois disso instalamos o socket.io com `--save` para ele ser inserido nas `dependencies` do `package.json`.\n\n```\nnpm i --save express\n```\n\nAgora podemos criar o index.js contendo o Express para levantarmos um servidor http com gerenciamento de rotas, o `index.js` deverá ficar assim:\n\n```js\nvar app = require('express')();\nvar http = require('http').Server(app);\n\napp.get('/', function(req, res){\n  res.send('\u003ch1\u003eHello world\u003c/h1\u003e');\n});\n\nhttp.listen(3000, function(){\n  console.log('servidor rodando em localhost:3000');\n});\n```\n\n\nDepois disso você entra na URL `localhost:3000` e verá um belo e grande **Hello World**. Agora vamos criar um `index.html` que será servido pelo Express para nosso front-end.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eSocket.IO chat\u003c/title\u003e\n    \u003cstyle\u003e\n      * { margin: 0; padding: 0; box-sizing: border-box; }\n      body { font: 13px Helvetica, Arial; }\n      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }\n      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }\n      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }\n      #messages { list-style-type: none; margin: 0; padding: 0; }\n      #messages li { padding: 5px 10px; }\n      #messages li:nth-child(odd) { background: #eee; }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cul id=\"messages\"\u003e\u003c/ul\u003e\n    \u003cform action=\"\"\u003e\n      \u003cinput id=\"m\" autocomplete=\"off\" /\u003e\u003cbutton\u003eSend\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n\nE precisamos mudar nossa rota no Express para ela servir esse arquivo.\n\n```js\napp.get('/', function(req, res){\n  res.sendFile(__dirname + '/index.html');\n});\n```\n\n![Screenshot do index.html](https://cldup.com/DmTV-jmdaz-3000x3000.png)\n\n###Integrando o socket.io\n\nJá criamos a nossa interface básica, agora precisamos instalar o socket.io o qual é dividido em 2 partes:\n\n- Um servidor que se integra ao servidor HTTP do Node.js: socket.io\n- Uma biblioteca que carregamos no navegador: socket.io-client\n\nPara começarmos a integrar antes precisamos instalar ele localmente:\n\n```\nnpm i --save socket.io\n```\n\nDepois vamos modificar o `index.js` e deixá-lo assim:\n\n```js\nvar app = require('express')();\nvar http = require('http').Server(app);\nvar io = require('socket.io')(http);\n\napp.get('/', function(req, res){\n  res.sendFile(__dirname + '/index.html');\n});\n\nio.on('connection', function(socket){\n  console.log('um usuario conectou');\n});\n\nhttp.listen(3000, function(){\n  console.log('servidor rodando em localhost:3000');\n});\n```\n\nVamos analisar as modificações:\n\n```js\nvar io = require('socket.io')(http);\n```\n\nAqui estamos importando o socket.io passando para seu módulo nosso servidor HTTP.\n\n```js\nio.on('connection', function(socket){\n  console.log('um usuario conectou');\n});\n```\n\nE no código acima estamos usando a função `on` escutando o evento `connection`e recebendo o objeto `socket` via callback.\n\nDepois disso precisamos integrar o socket.io no front-end, para isso vamos inserir o seguinte código no final, antes do `\u003c/body\u003e`, do `index.html`:\n\n```html\n\n\u003cscript src=\"/socket.io/socket.io.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var socket = io();\n\u003c/script\u003e\n```\n\nNa chamada `src=\"/socket.io/socket.io.js\"` vai carregar o `socket.io-client` que expõe uma global, `io`.\n\nNa única linha do nosso script nós estamos\n\n\n![](https://cldup.com/OcJ3ZUv38U-1200x1200.png)\n\nVocê pode abrir mais abas e ver elas conectadas.\n\n![](https://cldup.com/79UNmKTVRt-1200x1200.png)\n\nCada socket também pode disparar o evento `disconnect` e para ouvirmos ele modificaremos nosso código para o seguinte:\n\n```js\nio.on('connection', function(socket){\n  console.log('um usuario conectou');\n  socket.on('disconnect', function(){\n    console.log('usuario desconectou');\n  });\n});\n```\n\nPerceba que o `disconnect` não está no `io` que é nosso servidor e sim em **cada** socket que chega no nosso servidor, por isso a função `on` está sendo chamada no `socket`.\n\nAgora você pode atualizar um aba várias vezes e terá o seguinte resultado:\n\n![](https://cldup.com/_eJqTwAVyi-2000x2000.png)\n\n###Emitindo eventos\n\nA principal ideia por trás do Socket.io é que você possa enviar e receber qualquer evento e qualquer dado que você quiser. Você pode enviar qualquer objeto que possa ser convertido para JSON, dados binários também são suportados.\n\nVamos emitir um evento quando o usuário escrever uma mensagem, o servidor receberá um evento chamado `chat message`, porém para fazermos nosso exemplo mais fácil utilizaremos o jQuery e enviamos os dados quando emitimos o evento.\n\n```\n\u003cscript src=\"http://code.jquery.com/jquery-1.11.1.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  var socket = io();\n  $('form').submit(function(){\n    var mensagem = $('#m').val();\n    socket.emit('chat message', mensagem);\n    $('#m').val('');\n    return false;\n  });\n\u003c/script\u003e\n```\n\nO envio da mensagem se dá nessa linha `socket.emit('chat message', $('#m').val());`. Fácil perceber que a função `emit` é a responsável por emitirmos um evento que será recebido via socket no nosso servidor.\n\nDepois só precisamos ouvir esse evento no servidor.\n\n```\nsocket.on('chat message', function(msg){\n  console.log('message: ' + msg);\n});\n```\n\nAgora vamo testar nosso chat se está enviando a mensagem e o servidor está recebendo.\n\n![](https://cldup.com/jiMht0-GPF.thumb.png)\n\n![](https://cldup.com/VkN6AJOB6f-1200x1200.png)\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuissa%2Fsocket.io-manual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuissa%2Fsocket.io-manual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuissa%2Fsocket.io-manual/lists"}