zoukankan      html  css  js  c++  java
  • 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="400px;height:400px;border:1px solid #ccc"></div>
        <input type="text" id="msg" style="200px">
        <button id="submit">提交</button>
    
        <script>
        	//点击提交,获取输入框的值,然后通过ws将其发送给服务端,然后服务端进行推送广播给客户端
            document.querySelector("#submit").addEventListener("click",()=>{
                let myValue = document.querySelector("#msg").value;
                //需要将myValue发送给服务端
                ws.send(myValue)
            })
    
        </script>
    </body>
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    杂记:高僧的炒股境界
    在Windows 7中使用tsmmc远程桌面
    VS2010初体验
    code4fun: one service,one config
    WCF进阶:将编码后的字节流压缩传输
    有高手想换工作的么?
    code4fun:host wcf service just in time
    evey的几张鼠绘
    说说WCF Rest
    外包一类似联众room的项目
  • 原文地址:https://www.cnblogs.com/cupid10/p/13467779.html
Copyright © 2011-2022 走看看