Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/suissa/socket.io-manual

Manual do Socket.io
https://github.com/suissa/socket.io-manual

Last synced: 6 days ago
JSON representation

Manual do Socket.io

Awesome Lists containing this project

README

        

![](http://faunaurbana.com.br/wp-content/uploads/2014/10/pedagios-paulistas-junho.jpg)

##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');
    });
    ```

    ![Screenshot do index.html](https://cldup.com/DmTV-jmdaz-3000x3000.png)

    ###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 `