Nodejs教程19：WebSocket之一：使用Socket.io創建WebSocket應用

時間 2019-11-17

標籤 nodejs 教程 websocket 之一使用 socket.io socket 創建應用欄目系統網絡简体版

原文原文鏈接

閱讀更多系列文章請訪問個人GitHub博客，示例代碼請訪問這裏。

WebSocket的優點

性能高。html

根據測試環境數據的不一樣，大約會比普通Ajax請求高2-10倍。 HTTP是文本協議，數據量比較大。前端

而WebSocket是基於二進制的協議，在創建鏈接時用的雖然是文本數據，但以後傳輸的都是二進制數據，所以性能比Ajax請求高。node
雙向通訊。git

若是是普通Ajax請求，須要實時獲取數據，只能用計時器定時發送請求，這樣會浪費服務器資源和流量。github

而經過WebSocket，服務器能夠主動向前端發送信息。api
安全性高跨域

因爲WebSocket出現較晚，相比HTTP協議，在安全性上考慮的更加充分。瀏覽器

接下來，嘗試用Socket.io創建一個基於WebSocket的雙向通訊。安全

Socket.io

Socket.io是在使用WebSocket時的一個經常使用庫，它會自動判斷在支持WebSocket的瀏覽器中使用WebSocket，在其餘瀏覽器中，會使用如flash等方式完成通訊。bash

操做簡單
兼容低端瀏覽器，如IE6
自動進行數據解析
自動重連若出現鏈接斷開的狀況，WebSocket會進行自動重連。

使用Socket.io創建一個WebSocket應用

服務端示例代碼：/lesson19/server.js

const http = require('http')
const io = require('socket.io')

// 1. 創建HTTP服務器。
const server = http.createServer((req, res) => {

})

server.listen(8080)

// 2. 創建WebSocket，讓socket.io監聽HTTP服務器，一旦發現是WebSocket請求，則會自動進行處理。
const ws = io.listen(server)

// 創建鏈接完成後，觸發connection事件。
// 該事件會返回一個socket對象（https://socket.io/docs/server-api/#Socket），能夠利用socket對象進行發送、接收數據操做。
ws.on('connection', (socket) => {
  // 根據事件名，向客戶端發送數據，數據數量不限。
  socket.emit('msg', '服務端向客戶端發送數據第一條', '服務端向客戶端發送數據第二條')

  // 根據事件名接收客戶端返回的數據
  socket.on('msg', (...msgs) => {
    console.log(msgs)
  })

  // 使用計時器向客戶端發送數據
  setInterval(() => {
    socket.emit('timer', new Date().getTime())
  }, 500);
})
複製代碼

客戶端示例代碼：/lesson19/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 引用Socket.io的客戶端js文件，因爲Socket.io已在服務端監聽了HTTP服務器的請求，一旦收到對該文件的請求，則會自動返回該文件，不須要開發人員配置。 -->
  <!-- 該文件在服務端的位置爲/node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js -->
  <script src="http://localhost:8080/socket.io/socket.io.js"></script>
  <script>
    // 與服務器創建WebSocket鏈接，該鏈接爲ws協議，socket.io不須要擔憂跨域問題。
    const socket = io.connect('ws://localhost:8080/')

    // 根據事件名，向服務端發送數據，數據數量不限。
    socket.emit('msg', '客戶端向服務端發送數據第一條', '客戶端向服務端發送數據第二條')

    // 根據事件名接收服務端返回的數據
    socket.on('msg', (...msgs) => {
      console.log(msgs)
    })

    // 接收服務端經過計時器發送來的數據
    socket.on('timer', (time) => {
      console.log(time)
    })
  </script>
</body>

</html>
複製代碼