websocket(一)

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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值