webscoket监听后台与数据传输_websocte如何监听usb端口的数据-CSDN博客

本文链接：https://blog.csdn.net/goodtimedd/article/details/106948590

基本页面

<body>
    <input type="text" name="" id="" placeholder="请输入你的内容">
    <button>发送请求</button>
    <div></div>
</body>

由于h5内部提供了webscoket 的api 所以可直接使用

var scoket = new WebSocket('ws://localhost:3000')
//var ws = new WebSocket("wss://echo.websocket.org")官方给的
//连接服务时立即触发
 scoket.addEventListener('open',function(){
         div.innerHTML='连接服务成功了'
     })
//自己封装的

前端代码

<body>
    <input type="text" name="" id="" placeholder="请输入你的内容">
    <button>发送请求</button>
    <div></div>
</body>


<script>
     var input = document.querySelector('input')
     var button = document.querySelector('button')
     var div = document.querySelector('div')
     const TYPE_ENTER = 0
     const TYPE_LEAVE = 1
     const TYPE_MSG = 2
     var scoket = new WebSocket('ws://localhost:3000')


     scoket.addEventListener('open',function(){
         div.innerHTML='连接服务成功了'
     })

     button.addEventListener('click',function(){
         var value = input.value
         scoket.send(value)
         input.value=''
     })


     scoket.addEventListener('message',function(e){
         console.log(e.data)
        var data = JSON.parse(e.data)
        //  div.innerHTML=e.data
        var dv = document.createElement('div')
        dv.innerHTML= data.msg + '------' + data.time 
        if(data.type==TYPE_ENTER){
            dv.style.color='green'
        } else if (data.type==TYPE_LEAVE){
            dv.style.color='red'
        }else{
          dv.style.color='pink'
        }
        div.appendChild(dv)
     })

     scoket.addEventListener('close', function(){
         div.innerHTML='服务断开连接'
     })
</script>

webscoket端服务

const ws = require('nodejs-websocket')  //导入websocket包
const PORT=3000
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2
 //用来记录用户连接总的数量
let count = 0

// conn 每个连接到服务器的对象都会有一个conn
const server = ws.createServer(conn => {
   console.log( '有用户连接上来了')
   count++
   conn.userName=`用户${count }`
   broadcast({
    type:TYPE_ENTER,
    msg:`${conn.userName}进入了聊天室`,
    time: new Date().toLocaleTimeString()
})
   //首先需要告诉所有的用户有新的用户加入到聊天室

//接收到I浏览器的数据
   conn.on('text', data => {
    //当接收到某个用户的信息的时候，告诉所有用户，发送的信息内容是什么
    broadcast({
        type:TYPE_MSG,
        msg:data,
        time: new Date().toLocaleTimeString()
    })

   })

// 关闭连接的时候， 触发
   conn.on('close', data => {
       console.log('关闭连接')
       count--
    // 告诉所有人有人离开了聊天室

    broadcast({
        type:TYPE_LEAVE,
        msg:`${conn.userName}离开了聊天室`,
        time: new Date().toLocaleTimeString()
    })
   })
   //连接异常 
   conn.on('error', data => {
       console.log('连接发生异常')
   })
})
// 
function broadcast(msg){
    //server.connections 所有的用户
   server.connections.forEach(item =>{
       item.send(JSON.stringify(msg))
   })
}

server.listen(PORT, ()=>{
    console.log(PORT+ 'running。。。。')
})

需要启动node才能运行