สร้างแอพแชตด้วย Node.js และ socket.io

1
{
2
  "name": "simple-chat",
3
  "version": "2.0.0"
4
}

1
{
2
  "name": "simple-chat",
3
  "version": "2.0.0",
4
  "dependencies": {
5
    "express": "^4.15.4",
6
    "pug": "^2.0.0-rc.4",
7
    "socket.io": "^2.0.3"
8
  }
9
}

1
const express = require('express')
2
const app = express()
3
const path = require('path')
4

5
const APP_PORT = 5555
6

7
// // ตั้งค่า เพื่อให้ express ทำการ render view ที่โฟลเดอร์ views
8
// // และใช้ template engine เป็น pug
9
app.set('views', path.join(__dirname, 'views'))
10
app.set('view engine', 'pug')
11

12
app.get('/', (req, res) => {
13
  res.render('index')
14
})
15

16
app.listen(APP_PORT, () => {
17
  console.log(`App running on port ${APP_PORT}`)
18
})

1
h1 Hello World

1
doctype html
2
html
3
  head
4
    title Chat Application Example by DEVAHOY
5
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css')
6
    link(rel='stylesheet', href='css/main.css')
7
    script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
8
    script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js')
9
  body
10
    #chat-app
11
      #chat.has-text-centered
12
        section.hero.is-success
13
          .hero-body
14
            .container
15
              h1.title Chat
16
              h2 Chat Application with Node.js + socket.io
17
        section.section.chat-container
18
          .container
19
            .columns
20
              .box.column.is-8.is-offset-2
21
                h2.title Chatbox
22
                .chat-messages.has-text-left
23
                  ul#chat-messages
24
                form
25
                  .field.has-addons
26
                    p.control
27
                      input(type='text', class='input', value='Chuck Norris', id='name')
28
                    p.control.is-expanded
29
                      input(type='text', class='input', placeholder='Try to say something', id='message')
30
                    p.control
31
                      input(type='submit', class='button is-success', value='Post')
32
        footer
33
          .container
34
            .content
35
              p
36
                | Powered by
37
                a(href='https://devahoy.com') DEVAHOY

1
body {
2
  font-family: Avenir, Helvetica, Arial, sans-serif;
3
}
4

5
form {
6
  margin-top: 12px;
7
}
8

9
#chat-messages li {
10
  padding: 12px;
11
}

1
app.use(express.static('public'))

1
node app.js

1
const server = app.listen(APP_PORT, () => {
2
  console.log(`App running on port ${APP_PORT}`)
3
})
4

5
const io = require('socket.io').listen(server)

1
io.on('connection', function (socket) {
2
  console.log('a user connected')
3
})

1
const express = require('express')
2
const app = express()
3
const path = require('path')
4

5
const APP_PORT = 5555
6

7
const server = app.listen(APP_PORT, () => {
8
  console.log(`App running on port ${APP_PORT}`)
9
})
10

11
const io = require('socket.io').listen(server)
12

13
// ตั้งค่า เพื่อให้ express ทำการ render view ที่โฟลเดอร์ views
14
// และใช้ template engine เป็น pug
15
app.set('views', path.join(__dirname, 'views'))
16
app.set('view engine', 'pug')
17

18
app.use(express.static('public'))
19

20
app.get('/', (req, res) => {
21
  res.render('index')
22
})
23

24
io.on('connection', (socket) => {
25
  console.log('a user connected')
26
})

1
script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
2
script.
3
  const socket = io();

1
doctype html
2
html
3
  head
4
    title Chat Application Example by DEVAHOY
5
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css')
6
    link(rel='stylesheet', href='css/main.css')
7
    script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js')
8
  body
9
    #chat-app
10
      #chat.has-text-centered
11
        section.hero.is-success
12
          .hero-body
13
            .container
14
              h1.title Chat
15
              h2 Chat Application with Node.js + socket.io
16
        section.section.chat-container
17
          .container
18
            .columns
19
              .box.column.is-8.is-offset-2
20
                h2.title Chatbox
21
                .chat-messages.has-text-left
22
                  ul#chat-messages
23
                form
24
                  .field.has-addons
25
                    p.control
26
                      input(type='text', class='input', value='Chuck Norris', id='name')
27
                    p.control.is-expanded
28
                      input(type='text', class='input', placeholder='Try to say something', id='message')
29
                    p.control
30
                      input(type='submit', class='button is-success', value='Post')
31
        footer
32
          .container
33
            .content
34
              p
35
                | Powered by
36
                a(href='https://devahoy.com') DEVAHOY
37
      script.
38
        const socket = io();

1
var socket = io();
2
socket.emit('chatter', 'Hello from client');

1
io.on('connection', function (socket) {
2
  socket.on('chatter', function (message) {
3
    console.log('message : ' + message)
4
  })
5
})

1
script.
2
  const socket = io();
3
  $('form').submit(function() {
4
    const name = $('#name').val();
5
    const message = $('#message').val();
6

7
    socket.emit('chatter', `${name} : ${message}`);
8
    $('#message').val('');
9
    return false;
10
  });

1
io.on('connection', (socket) => {
2
  socket.on('chatter', (message) => {
3
    console.log('message : ', message)
4
    io.emit('chatter', message)
5
  })
6
})

1
script.
2
  socket.on('chatter', function(message) {
3
    $('#chat-messages').append($('<li>').text(message));
4
  });