日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界」，作者xilingls。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。

創(chuàng)新互聯(lián)建站專注于巴林右旗網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供巴林右旗營(yíng)銷型網(wǎng)站建設(shè)，巴林右旗網(wǎng)站制作、巴林右旗網(wǎng)頁(yè)設(shè)計(jì)、巴林右旗網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造巴林右旗網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供巴林右旗網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

回憶以下上一篇內(nèi)容：《有了 HTTP 協(xié)議，為什么還需要 Websocket?》，了解一下 Websocket 的特點(diǎn)和通信原理，我們接著來(lái)看 Websocket 服務(wù)端與客戶端實(shí)現(xiàn)。

Websocket 服務(wù)端與客戶端實(shí)現(xiàn)

經(jīng)過(guò)前面對(duì)通信過(guò)程的梳理，我們將 WebSocket 通信的基本機(jī)制已經(jīng)說(shuō)的差不多了，為了方便你快速進(jìn)入實(shí)戰(zhàn)階段，我們暫時(shí)放棄純手寫實(shí)現(xiàn)，直接選擇使用老牌的 WebSocket 庫(kù): WebSocket-Nodehttps://github.com/theturtle32/WebSocket-Node

簡(jiǎn)單介紹一下 WebSocket-Node，它有多老牌呢?

NPM 的包名字就是直接使用的 “WebSocket”。曾經(jīng)，我們西嶺老濕看到之后就給出了兩個(gè)字的評(píng)價(jià)：“猖狂”。

這個(gè)庫(kù)完全使用 JavaScript 實(shí)現(xiàn)，包含了客戶端及服務(wù)端的實(shí)例。其中，客戶端包含了 Node 和 瀏覽器 兩個(gè)運(yùn)行環(huán)境的代碼，除了支持我們前面提到的 Websocket 協(xié)議的 13 版本，它同時(shí)還支持 Websocket 協(xié)議 8 這個(gè)老版本，實(shí)屬優(yōu)秀。

接下來(lái)，我們就來(lái)看看，如何借助 Websocket-Node 實(shí)現(xiàn)一個(gè) Websocket 服務(wù)。

服務(wù)端

安裝 npm install websocket 后，創(chuàng)建服務(wù)器運(yùn)行文件 ws-server.js ，代碼如下，請(qǐng)認(rèn)真閱讀代碼及注釋：

 
 
 
 

  
  
  
  
// === 作為帥哥，一定要加注釋 ===
  
  
  
  
var Websocket = require('websocket').server
  
  
  
  
var http = require('http')
  
  
  
  

  
  
  
  
// 創(chuàng)建 HTTP 服務(wù)，作為第一次握手鏈接使用
  
  
  
  
var httpServer = http.createServer().listen(8080,function(){
  
  
  
  
  console.log('http://127.0.0.1:8080')
  
  
  
  
})
  
  
  
  

  
  
  
  
// 創(chuàng)建 websocket 服務(wù)實(shí)力
  
  
  
  
var wsServer = new Websocket({
  
  
  
  
  // 配置依賴的握手 http 服務(wù)器
  
  
  
  
  httpServer:httpServer,
  
  
  
  

  
  
  
  
  autoAcceptConnections:false
  
  
  
  
})
  
  
  
  

  
  
  
  
// 保存鏈接池
  
  
  
  
var conArr = []
  
  
  
  

  
  
  
  
// 監(jiān)聽 ws 請(qǐng)求事件
  
  
  
  
wsServer.on('request',function(request){
  
  
  
  
  // 獲取鏈接示例
  
  
  
  
  var connection = request.accept()
  
  
  
  
  // 保存連接池
  
  
  
  
  conArr.push(connection)
  
  
  
  
  // 監(jiān)聽消息事件
  
  
  
  
  connection.on('message',function(msg){
  
  
  
  
    console.log(msg)
  
  
  
  
    // 循環(huán)連接池，推送廣播消息至客戶端
  
  
  
  
    for(let i = 0;i
  
  
  
  
      conArr[i].send(msg.utf8Data)
  
  
  
  
    }
  
  
  
  
  })
  
  
  
  
})
  
  
  
  

  
  
  
  
// 據(jù)說(shuō)，長(zhǎng)得好看的都會(huì)看注釋
 
 
 
 

過(guò)多的描述，就不寫了，據(jù)說(shuō)，長(zhǎng)得好看的都會(huì)看代碼注釋(●'?'●)

運(yùn)行代碼文件后，不出意外的情況下，命令行進(jìn)程會(huì)被占用，監(jiān)聽端口也會(huì)被占用，證明服務(wù)端運(yùn)行成功。如果兩個(gè)都沒被占用，想啥呢?失敗了呀寶子……

如果服務(wù)器啟動(dòng)成功，我怎么用客戶端建立鏈接查看呢?有一款 Websocket 客戶端工具叫 WebsocketMan，如果感興趣，你可以下載來(lái)試試。

但是像我這樣的帥哥，一般都是自己寫客戶端：)

客戶端

Websocket 的客戶端并沒有什么技術(shù)難點(diǎn)，就是瀏覽器 API 調(diào)用。只要你把通信機(jī)制夠清楚，這玩意就沒有不會(huì)，因?yàn)榉浅：?jiǎn)單，我們直接選擇純手寫就可以了，如果你想使用 Websocket-Node 客戶端，確實(shí)還會(huì)更簡(jiǎn)單。

當(dāng)然，在寫之前，還是要去看看手冊(cè)的，要不然你怎么知道有哪些 API 呢?

來(lái)，手冊(cè)地址給你：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

你先看著，我就不客氣，直接開干……