Node.js项目实战-构建可扩展的Web应用(第一版)：9 WebSocket,Socket.IO和DerbyJS的实时应用程序

本文链接：https://blog.csdn.net/QFire/article/details/79047701

HTML5的WebSocket开创了实时连接的新标准。

9.1 什么是WebSocket

不同于传统的HTTP请求，WebSocket的连接是持久的，它通过在客户端和服务器之间保持双工连接，服务器的更新可以被及时推送给客户端，而不需要在客户端以一定的时间间隔去轮询。让WebSocket的思想运用到实时应用程序中的主要因素是客户端需要立即拿到服务器更新的数据。

9.2 用ws模块的例子介绍本地WebSocket和Node.js

浏览器WebSocket的实现：index.html

<html>
  <head>
  </head>
  <body>
    <input id="text" value="Hello"/>
    <script type="text/javascript">
      var ws = new WebSocket('ws://localhost:3000')
      ws.onopen = function(event) {    //建立连接后，发送数据
        ws.send('front-end message: ABC');
      };
      ws.onmessage = function(event) {
        console.log('server message: ', event.data)
      };
      const el = document.getElementById('text')
      el.addEventListener('input', (event)=>{
        console.log(event, el)
        ws.send(`your input value is ${el.value}`)
      })
    </script>
  </body>
</html>

用ws模块的Node.js服务器实现：server.js

const WebSocketServer = require('ws').Server
const wss = new WebSocketServer({port: 3000})

wss.on('connection', (ws) => {
  ws.send('XYZ')
  setInterval(()=>{
    ws.send((new Date).toLocaleTimeString())
  }, 1000)
  ws.on('message', (message) => {
    console.log('received: %s', message)
  })
})

9.3 Socket.IO和Express.js的例子

浏览器和服务器间的双工通信：

app.js

const http = require('http')
const express = require('express')
const path = require('path')
const logger = require('morgan')
const bodyParser = require('body-parser')

const routes = require('./routes/index')
const app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')

app.use(logger('dev'))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
app.use(express.static(path.join(__dirname, 'public')))

app.use('/', routes)

const server = http.createServer(app)
const io = require('socket.io').listen(server)

io.sockets.on('connection', (socket) => {
  socket.on('messageChange', (data) => {
    console.log(data)
    socket.emit('receive', data.message.split('').reverse().join(''))
  })
})

app.set('port', process.env.PORT || 3000)
server.listen(app.get('port'), () => {
  console.log(`Express server listening on port ${app.get('port')}`)
})