├── example-01
├── .gitignore
├── package.json
├── index.js
└── index.html
└── README.md
/example-01/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
--------------------------------------------------------------------------------
/example-01/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sockets",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "Suissa",
10 | "license": "WTFPL",
11 | "dependencies": {
12 | "express": "^4.10.2",
13 | "socket.io": "^1.3.2"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/example-01/index.js:
--------------------------------------------------------------------------------
1 | var app = require('express')();
2 | var http = require('http').Server(app);
3 | var io = require('socket.io')(http);
4 |
5 | app.get('/', function(req, res){
6 | res.sendFile(__dirname + '/index.html');
7 | });
8 |
9 | io.on('connection', function(socket){
10 | console.log('um usuario conectou');
11 | socket.on('disconnect', function(){
12 | console.log('usuario desconectou');
13 | });
14 | socket.on('chat message', function(msg){
15 | console.log('menssagem: ' + msg);
16 | });
17 | })
18 |
19 |
20 | http.listen(3000, function(){
21 | console.log('listening on *:3000');
22 | });
--------------------------------------------------------------------------------
/example-01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Socket.IO chat
5 |
15 |
16 |
17 |
18 |
21 |
22 |
23 |
32 |
33 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | ##O que é?
4 |
5 |
6 | ##Criando um chat
7 |
8 | 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.
9 |
10 | ###Criando servidor web
11 | 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:
12 |
13 | ```js
14 | {
15 | "name": "socket-chat-exemplo",
16 | "version": "0.0.1",
17 | "description": "Meu primeiro app em socket.io",
18 | "dependencies": {}
19 | }
20 | ```
21 |
22 | Depois disso instalamos o socket.io com `--save` para ele ser inserido nas `dependencies` do `package.json`.
23 |
24 | ```
25 | npm i --save express
26 | ```
27 |
28 | Agora podemos criar o index.js contendo o Express para levantarmos um servidor http com gerenciamento de rotas, o `index.js` deverá ficar assim:
29 |
30 | ```js
31 | var app = require('express')();
32 | var http = require('http').Server(app);
33 |
34 | app.get('/', function(req, res){
35 | res.send('Hello world
');
36 | });
37 |
38 | http.listen(3000, function(){
39 | console.log('servidor rodando em localhost:3000');
40 | });
41 | ```
42 |
43 |
44 | 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.
45 |
46 | ```html
47 |
48 |
49 |
50 | Socket.IO chat
51 |
61 |
62 |
63 |
64 |
67 |
68 |
69 | ```
70 |
71 |
72 | E precisamos mudar nossa rota no Express para ela servir esse arquivo.
73 |
74 | ```js
75 | app.get('/', function(req, res){
76 | res.sendFile(__dirname + '/index.html');
77 | });
78 | ```
79 |
80 | 
81 |
82 | ###Integrando o socket.io
83 |
84 | Já criamos a nossa interface básica, agora precisamos instalar o socket.io o qual é dividido em 2 partes:
85 |
86 | - Um servidor que se integra ao servidor HTTP do Node.js: socket.io
87 | - Uma biblioteca que carregamos no navegador: socket.io-client
88 |
89 | Para começarmos a integrar antes precisamos instalar ele localmente:
90 |
91 | ```
92 | npm i --save socket.io
93 | ```
94 |
95 | Depois vamos modificar o `index.js` e deixá-lo assim:
96 |
97 | ```js
98 | var app = require('express')();
99 | var http = require('http').Server(app);
100 | var io = require('socket.io')(http);
101 |
102 | app.get('/', function(req, res){
103 | res.sendFile(__dirname + '/index.html');
104 | });
105 |
106 | io.on('connection', function(socket){
107 | console.log('um usuario conectou');
108 | });
109 |
110 | http.listen(3000, function(){
111 | console.log('servidor rodando em localhost:3000');
112 | });
113 | ```
114 |
115 | Vamos analisar as modificações:
116 |
117 | ```js
118 | var io = require('socket.io')(http);
119 | ```
120 |
121 | Aqui estamos importando o socket.io passando para seu módulo nosso servidor HTTP.
122 |
123 | ```js
124 | io.on('connection', function(socket){
125 | console.log('um usuario conectou');
126 | });
127 | ```
128 |
129 | E no código acima estamos usando a função `on` escutando o evento `connection`e recebendo o objeto `socket` via callback.
130 |
131 | Depois disso precisamos integrar o socket.io no front-end, para isso vamos inserir o seguinte código no final, antes do ` `, do `index.html`:
132 |
133 | ```html
134 |
135 |