node-Socket编程

node-Socket编程

全双工通信，主要基于服务端推送技术实现

可以实现实时聊天，就比如qq群，同学A发出消息，群里的其他同学可以实时看到消息

node.js中可以依靠原生模块net实现Socket编程，在H5的浏览器里面可以借助ws模块实现websocket实现实时通信编程

创建服务器，在控制台下载ws模块

yarn add ws

server.js
const WebSocket = require("ws").Server;
const ws = new WebSocket({
    port:9000
})

let clientMap = {}
let i = 0

//监听客户端连接
ws.on("connection",client=>{
    client.name = ++i
    clientMap[client.name] = client
    //接受客户端发送来的消息，然后进行广播，服务端推送消息给所有的客户端对象
    client.on("message",data=>{
        broadCast(client,data)
    })
    client.on("error",()=>{
        console.log(client.name+"下线了...")
    })
})

//可以让服务端做一个广播的效果，将具体client发送的message传送给所有的客户端对象
function broadCast(client,data){
    for(let key in clientMap){
        clientMap[key].send(client.name+"说的："+data)
    }
}

创建客户端Client.js

//创建客户端实例
const ws = new WebSocket("ws://localhost:9000")

//客户端向服务端发送消息
ws.onopen = ()=>{
    ws.send("大家好！")
}

//客户端接受服务端发送消息
ws.onmessage = data =>{
    document.querySelector("#content").innerHTML += data.data+"<br/>"
}

//客户端可以监听服务端关闭，触发此方法
ws.onclose = ()=>{
    console.log("服务器关闭了...")
}

在前端index.html引入客户端文件

<!--引入客户端文件-->
<script src="./Client.js"></script>

通过nodemon Servr.js指令开启服务 然后打开index.html页面，控制台输入ws

<body>
    <h1>websokect实现在线聊天室</h1>
    <div id="content" style="width:400px;height:400px;border:1px solid #ccc"></div>
    <input type="text" id="msg" style="width:200px">
    <button id="submit">提交</button>

    <script>
    	//点击提交，获取输入框的值，然后通过ws将其发送给服务端，然后服务端进行推送广播给客户端
        document.querySelector("#submit").addEventListener("click",()=>{
            let myValue = document.querySelector("#msg").value;
            //需要将myValue发送给服务端
            ws.send(myValue)
        })

    </script>
</body>
posted @ 2020-08-10 09:13  Cupid05  阅读(158)  评论(0)  编辑  收藏  举报