websocket(多个客户端)

最新推荐文章于 2024-05-09 10:31:57 发布

twcmeizi

最新推荐文章于 2024-05-09 10:31:57 发布

阅读量5.3k

点赞数 1

文章标签： websocket nodejs

本文链接：https://blog.csdn.net/lm13420109892/article/details/109459442

版权

1.websocket是html5开始提供的一种浏览器和客户端进行全双工通讯的网络技术
现很多网站为了实现即时通讯，所用到的技术是轮询polling，使用websocket,浏览器和服务器只要做一个握手的动作，在两者之间形成快速通道

实时通讯，可以保持与客户端的长连接
节省资源：互相沟通的header大概2Bytes
推送信息：不需要客户端请求，服务器可以主动传送数据给客户端

微信小程序的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;
            }
        }
    })
})

twcmeizi

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
websocket(多个客户端)

1.websocket是html5开始提供的一种浏览器和客户端进行全双工通讯的网络技术现很多网站为了实现即时通讯，所用到的技术是轮询polling，使用websocket,浏览器和服务器只要做一个握手的动作，在两者之间形成快速通道实时通讯，可以保持与客户端的长连接节省资源：互相沟通的header大概2Bytes推送信息：不需要客户端请求，服务器可以主动传送数据给客户端微信小程序的websocketwebsocket.wxml:<input bindchange="sendMsg"&
复制链接

扫一扫