Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/suissa/socket.io-manual
Manual do Socket.io
https://github.com/suissa/socket.io-manual
Last synced: 7 days ago
JSON representation
Manual do Socket.io
- Host: GitHub
- URL: https://github.com/suissa/socket.io-manual
- Owner: suissa
- Created: 2015-02-02T19:28:58.000Z (almost 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2016-03-15T10:03:54.000Z (over 8 years ago)
- Last Synced: 2024-04-10T21:19:11.163Z (7 months ago)
- Language: HTML
- Size: 971 KB
- Stars: 15
- Watchers: 2
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##O que é?
##Criando um chat
Criar 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.
###Criando servidor web
Primeiramente 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:
```js
{
"name": "socket-chat-exemplo",
"version": "0.0.1",
"description": "Meu primeiro app em socket.io",
"dependencies": {}
}
```
Depois disso instalamos o socket.io com `--save` para ele ser inserido nas `dependencies` do `package.json`.
```
npm i --save express
```
Agora podemos criar o index.js contendo o Express para levantarmos um servidor http com gerenciamento de rotas, o `index.js` deverá ficar assim:
```js
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('
Hello world
');
});
http.listen(3000, function(){
console.log('servidor rodando em localhost:3000');
});
```
Depois 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.
```html
Socket.IO chat
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
Send
```
E precisamos mudar nossa rota no Express para ela servir esse arquivo.
```js
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
```
###Integrando o socket.io
Já criamos a nossa interface básica, agora precisamos instalar o socket.io o qual é dividido em 2 partes:
- Um servidor que se integra ao servidor HTTP do Node.js: socket.io
- Uma biblioteca que carregamos no navegador: socket.io-client
Para começarmos a integrar antes precisamos instalar ele localmente:
```
npm i --save socket.io
```
Depois vamos modificar o `index.js` e deixá-lo assim:
```js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('um usuario conectou');
});
http.listen(3000, function(){
console.log('servidor rodando em localhost:3000');
});
```
Vamos analisar as modificações:
```js
var io = require('socket.io')(http);
```
Aqui estamos importando o socket.io passando para seu módulo nosso servidor HTTP.
```js
io.on('connection', function(socket){
console.log('um usuario conectou');
});
```
E no código acima estamos usando a função `on` escutando o evento `connection`e recebendo o objeto `socket` via callback.
Depois disso precisamos integrar o socket.io no front-end, para isso vamos inserir o seguinte código no final, antes do `