nodejs + websocket (socket.io)

時間 2019-11-08

標籤 nodejs websocket socket.io socket 欄目系統網絡简体版

原文原文鏈接

爲何須要 WebSocket？

由於我的對概念理解不是很深，文字表達能力不強，若是有關HTTP等方面描述不許確，歡迎糾正，謝謝你們html

初次接觸 WebSocket 的人，都會問一樣的問題：咱們已經有了 HTTP 協議，爲何還須要另外一個協議？它能帶來什麼好處？
答案很簡單，由於 HTTP 協議有一個缺陷：通訊只能由客戶端發起。node

舉例來講：咱們想了解今天的天氣，只能是客戶端向服務器發出請求，服務器返回查詢結果。HTTP 協議作不到服務器主動向客戶端推送信息。web

這種單向請求的特色，註定了若是服務器有連續的狀態變化，客戶端要獲知就很是麻煩。咱們只能使用"輪詢"：設置定時器每隔一段時候，就發出一個"詢問"(簡單理解爲ajax請求)，瞭解服務器有沒有新的信息。最典型的場景就是聊天室。ajax

---- 參考了阮一峯老師的文章： WebSocket 教程npm

輪詢請求的缺點：

不停地連接，斷開,連接，斷開請求，浪費不少服務器資源
浪費帶寬
移動端浪費流量

websocket的優勢：

沒有同源限制，客戶端能夠與任意服務器通訊，不涉及到跨域的問題。
雙向通訊，服務器能夠向客戶端主動發送數據。
數據格式比較輕量，性能開銷小，通訊高效。

websocket爲何高效

普通的http通訊是基於字符的通訊(超文本), websocket一開始是文本協議, 當連接創建後變成二進制協議， 數據無需轉換，所以效率高。

socket.io的使用

socket.io是一個封裝後的庫，原生 websocket 比較複雜，須要本身處理請求頭，設置持續連接等等。所以使用socket.io

安裝

npm i socket.io -D
socket主要有兩個方法：
sock.emit('name', data) 主動發送數據
sock.on('name', function(data){ })` 接收數據跨域

1.服務端

// server.js
    const http = require('http')
    const io = require('socket.io')
    
    let server = http.createServer((req, res)=>{})
    server.listen(8080)
    
    // 創建ws  websocket簡稱ws
    let wsServer = io.listen(server);
    
    wsServer.on('connection', sock=>{
    
      sock.on('aaa', function(a,b){         // name -> 'aaa' 要與前臺的 name 保持一致
        console.log(a)
        console.log(b)
        console.log(arguments)
      })     // 'aaa'事件名與前臺的一致
    
      setInterval(function(){
        sock.emit('bbb', '服務器發來的數據')  // name -> 'bbb' 要與前臺的 name 保持一致
      }, 2000)
    })

2. 客戶端

<!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">

  <script src='http://localhost:8080/socket.io/socket.io.js'></script> 
  <!-- 
    有人好奇 XXX/socket.io/socket.io.js 文件，爲何個人目錄裏沒有啊，這個是從你的/node_modules/下獲取的。
    當向後臺發送請求後，socket會判斷req.url，作一個相似於下面的處理，讀取 socket-io.js：
    if(req.url == '/socket.io/socket.io.js'){ 
        fs.readFile('node_modules/socket.io-client/dist/socket-io.js')   
    }
   
    固然咱們也能夠直接將socket-io.js複製出來，直接用script引用，可是若是socket更新後咱們的代碼可能不是最新版，會出現一些問題。
    所以不建議這樣使用：<script src='./socket.io.js'></script> 
  -->
  <script>
    let sock = io.connect('ws://localhost:8080/')    // 這裏是 ws 協議，不是 http 協議

    // sock.emit
    // sock.on

    sock.emit('aaa', 'maruihua', 5 )

    sock.on('bbb', data => console.log(data))
  </script>
</head>
<body>
</body>
</html>

上面的代碼直接複製下來就能使用。怎麼運行nodejs服務我就再也不講了啊。
怎麼樣，是否是特別簡單
媽媽不再用擔憂個人學習了~服務器

相關標籤/搜索

nodejs+express+socket.io

nodejs+arduino+socket.io

jsp+nodejs+socket.io

socket.io+redis+nodejs+nginx

angular+nodejs+socket.io

系統網絡

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。