websocket(一)

最新推荐文章于 2022-06-08 15:41:30 发布

哈哈小猿

最新推荐文章于 2022-06-08 15:41:30 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/qq_42251357/article/details/109302138

版权

websocket（一）

WebSocket (即时通讯)是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据

1.基本方法使用(H5)

<body>
    <input type="text" name="" id="">
    <button>发送</button>
    <div></div>
</body>

// 1:创建socket服务 ws://localhost:3000本地自建的socket服务员
    var socket = new WebSocket("ws://localhost:3000")

//2:open连接到websocket服务时触发
    socket.addEventListener("open",()=>{
        div.innerHTML="websocket已连接！！！"
    })
    btn.onclick=function(){
        var value= ipt.value
        //3: send 主动向websocket发送信息
        socket.send(value) 
        ipt.value=""
    }


 //4:接收websocket返回的消息
    socket.addEventListener("message",function(e){
        var p=document.createElement("p")
         p.innerHTML= e.data
         div.appendChild(p)
)

2.websocket服务端(node)

在node中安装依赖包nodejs-websocket

//1:加载依赖包
const ws =require("nodejs-websocket")
const PORT=3000;
let count = 0;

//2.0:创建一个server服务
//2.1:如何处理请求用户连接
//每次只要有用户连接 函数就会被执行，会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect=>{
    count++
    var userName = `用户${count}`
    broadcast(`${userName}进入了聊天室`)
    console.log(userName+"进入聊天室")

    //注册一个text方法 用来接收用户发来的消息数据
    connect.on("text",data=>{
        console.log(data)

        // send websocket向用户返回一个信息
        // connect.send(data)
        // 向每个用户发送发送消息
        broadcast(userName+":"+data)
    })
    // 只要websocket断开连接 close事件就会触发
    connect.on("close",data=>{
        count--
        broadcast(`${userName}离开聊天室`)
        console.log(userName+"离开聊天室")
    })

    // 注册一个error 处理用户的错误信息
    connect.on("error",()=>{
        console.log("用户连接异常")
    })
})
server.listen(PORT,()=>{
    console.log("websocket服务启动成功,监听端口号为"+PORT)
})

// node里面的一个广播方法
//server.connections 表示所有的用户
function broadcast(message){
    server.connections.forEach(function(conn){
        conn.send(message)
    })
}

哈哈小猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket(一)

websocket（一）WebSocket (即时通讯)是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议，使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据1.基本方法使用(H5)<body> <input type="text" name="" id=""> <button>发送</button> <div></div></body>//
复制链接

扫一扫