简易聊天室的实现

最新推荐文章于 2023-01-02 21:36:58 发布

ㄗòs╃牸架

最新推荐文章于 2023-01-02 21:36:58 发布

阅读量330

点赞数

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/122645564

版权

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

Node.js

13 篇文章 0 订阅

订阅专栏

熟练应用socket.io 与fs模块

html 文件

<body>
    <div class="login">
        <input type="text"><button>登录</button>
    </div>
    <div class="box" style="display: none;">
       
        <div class="title">
            <h1>欢迎<span></span></h1>
        </div>
        <div>
            <input type="text"><button>发送</button>私聊的人名：<input type="text">
        </div>
       
        <div class="content">

        </div>
        <div class="users">
            <ul>

            </ul>
        </div>
    </div>
    <script>
        //前端连接到websocket
        const  socket=io("ws://localhost:8088")
        //事件监听 监听后端的事件响应
        socket.on("success",data=>{
            console.log(data)
        })
        socket.on("loginerror",data=>{
            alert(data)
        })
        socket.on("loginsuccess",data=>{
            $(".login").hide()
            $(".box").show()
            $(".box h1 span").html(data)
            socket.on(`to${data}`,chat=>{
                console.log(chat)
            })
        })
        socket.on("adduser",data=>{
            console.log(data+"加入了聊天室")
        })
        socket.on("showuser",data=>{
            let str=""
            data.forEach(item=>{
                str+=`<li>${item}</li>`
            })
            $(".users ul").html(str)
        })
        socket.on("disuser",data=>{
            console.log(data+"退出了聊天室")
        })
        socket.on("showchat",data=>{
            $("<p />").html(`${data.username}说了：${data.message}`).appendTo($(".content"))
        })
        //点击登录
        $("button").eq(0).click(function(){
            let username=$(this).prev().val()
            //将username返回给 websocket服务
            socket.emit('login',username)
        })
        $("button").eq(1).click(function(){
            let message=$(this).prev().val()
            let username=$(this).next().val()
            if(username==""){
                socket.emit("addchat",message)
            }else{
                socket.emit("prichat",{username:username,message:message})
            }
           
        })
    </script>
</body>

app文件

const http = require("http")
const io = require("socket.io")
const fs = require("fs")
const url = require("url")
let users=[]
let server = http.createServer((req, res) => {
    if (req.method == "GET") {
        //谷歌浏览器 默认请求图标地址
        let { pathname, query } = url.parse(req.url, true)
        ///favicon.ico
        if(pathname=="/favicon.ico") return
        if (pathname.endsWith(".html")) {
            fs.readFile(`./www${pathname}`, (err, data) => {
                res.write(data)
                res.end()
            })
        }
    }
})
server.listen(8088)

let ws = io(server) //启动一个websocket服务  8088
//http://
//ws://

ws.on("connect", sock => {
    console.log("有人来了")
    //响应一个事件，欢迎来到聊天室
    //第二参数 返回值 可以是任意类型
    sock.emit("success", "欢迎来到聊天室")
    //监听是否有登录事件 
    sock.on("login", data => {
        let result = users.some(item => item == data)
        if (result) {
            //登录失败
            sock.emit("loginerror","登录失败")
        } else {
            //登录成功
            sock.username=data
            users.push(data)
            sock.emit("loginsuccess", data)
            //给其他人发送一个响应，告诉其他有用户增加 并且弹出谁进入了聊天室
            sock.broadcast.emit("adduser", data)
            //给所有人去更新对应的用户列表
            ws.sockets.emit("showuser",users)
        }
    })
    sock.on("addchat", data => {
         //给所有人去更新对应的用户列表
         ws.sockets.emit("showchat",{username:sock.username,message:data})
    })
    //断开事件监听
    sock.on("disconnect", () => {
        //拿到当前所断开这个人名字
        if (sock.username) {
            let index = users.indexOf(sock.username)
            users.splice(index, 1)
            ws.sockets.emit("disuser", sock.username)
            ws.sockets.emit("showuser",users)
        }
    })
    //前端和后端 1对1 谁发的给谁响应  王一发的 给王二响应
    //1-对所有人！！！ 群聊 给所有人  
    //发送一个指定响应给所有人，然后指定前端 去响应对应的指定 
    sock.on("prichat", data => {
        console.log(data)
        //想要私聊的人名 以及私聊内容
        ws.sockets.emit(`to${data.username}`,{username:sock.username,message:data.message})
    })
})

ㄗòs╃牸架

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易聊天室的实现

熟练应用socket.io 与fs模块html 文件<body> <div class="login"> <input type="text"><button>登录</button> </div> <div class="box" style="display: none;"> <div class="title">
复制链接

扫一扫