websocket(多個客戶端)

lm13420109892發表於2020-11-02
Web客戶端

1.websocket是html5開始提供的一種瀏覽器和客戶端進行全雙工通訊的網路技術
現很多網站為了實現即時通訊，所用到的技術是輪詢polling，使用websocket,瀏覽器和伺服器只要做一個握手的動作，在兩者之間形成快速通道

  1. 實時通訊，可以保持與客戶端的長連線
  2. 節省資源：互相溝通的header大概2Bytes
  3. 推送資訊：不需要客戶端請求，伺服器可以主動傳送資料給客戶端
    在這裡插入圖片描述

微信小程式的websocket

websocket.wxml:

<input bindchange="sendMsg"></input>

websocket.js（一個連線）:

var wsApi='ws://192.168.2.126:3001'     //websocket是以ws為統一資源標誌符，類似於 HTTPS
var openBol=false;
Page({

  data: {

  },
  onLoad(){
  //建立連線
    wx.connectSocket({
      url: wsApi,
      header:{
        'content-type': 'application/json'
      },
      protocols: ['protocol1'],
      success(){
        console.log('客戶端連線成功')
      }
    })
    //通過 WebSocket 連線傳送資料。需要先 wx.connectSocket，並在 wx.onSocketOpen 回撥之後才能傳送。
    wx.onSocketOpen(function(){
      console.log('websocket連線以成功')
      openBol=true
    })
    wx.onSocketMessage((result) => {
      console.log(result)
    })
  },
  sendMsg(e){
    if(openBol){
      wx.sendSocketMessage({
        data: e.detail.value,
      })
    }
  }

})

網頁端

socket.html （另一個連線）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sockets</title>
</head>
<body>
    <input type="text" id="txt1">
    <script>
        var socket=new WebSocket("ws://192.168.2.126:3001")
        socket.onopen=function(){
            console.log('connect to server')
        }
        socket.onmessage=function(ev){
            console.log(ev.data)
        }
        var txt1=document.getElementById('txt1')
        txt1.onchange=function(){
            socket.send(this.value)
        }
    </script>
</body>
</html>

websock

server.js:(需要安裝ws模組，這裡主要是使用了node,通過node server.js 命令進行啟動)

var WebsocketServer=require('ws').Server;
var wss=new WebsocketServer({
    port:3001
})
var sockets=[]   //空陣列，儲存所有socket物件
//當客戶端有連線進入的時候會觸發connection 事件
wss.on('connection',function(ws){
    sockets.push(ws)      //將所有的socket物件push進陣列中
    console.log('伺服器端連線建立成功')
   
    ws.on('message',function(msg){//監聽事件，當客戶端傳送資訊給伺服器時，觸發
        console.log(msg)
        for(var i=0;i<sockets.length;i++){
            sockets[i].send(msg)
        }
       
    })
    ws.on('close',function(){//監聽事件，當客戶端關閉連線時，觸發
        for(var i=0;i<sockets.length;i++){
            if(sockets[i]==this){  //把關閉連線的websocket物件從sockets陣列中移除
                sockets.splice(i,1)
                break;
            }
        }
    })
})

相關文章