关于websocket

目录

定义

http协议与websocket的区别

流程

①引入http协议

②引入模块

③加入websocket服务

④事件监听

⑤与前端链接

⑥群聊事件的监听

⑦断开链接事件的监听

⑧饲料事件的监听

---

定义

http协议与websocket的区别

http协议：利用Ajax进行数据交互

1.单向协议：只有当前前端发送数据请求时，后端才给出响应，后端不会主动给前端发送关于网页的操作

2.短链接协议：从前端发送请求开始，到后端响应结束，链接就断了

websocket协议：多用于软件推送通知广告，聊天等等

1.双向传输，前端可以主动请求服务器，服务器也可以主动给前端发送内容

2.持久性链接：开始链接后一直报出链接装填，除非手动退出

缺点：资源消耗大

流程

websocket服务是基于http服务的，所以仍然需要http服务挂载

nodemon工具  ：自动刷新服务器文件

下载方式： npm install nodemon-g 

查看下载情况： nodemon -v

socket.io启动websocket服务的模块  第三方模块

引入http协议

//http启动

const http=require（"http"）

//fs静态文件的操作

const fs=require("fs")

//url模块

const url=require("url")

//启动websocket模块

const io=require("socket.io")

//新建一个数组保存用户名

let users=["老王"]

// .server

const server =http.createServer((req,res)=>{

        if(req.method=="GET"){

                let {parthname,query}=url.parse(req.url,true)

                if(parthname.endsWith(""html)){

                        fs.readFile(`./public${pathname}`,(err,data)=>{

                                if(err){

                                   res.write(404) //如果错误就返回报错信息404

                                   es.end()

                                }else{

                                    res.write(data)  //正确就返回接收到的内容

                                    res.end()                                   

                                }

                        })

                }

        }

})

//端口

server.listen(8088)

引入模块

const io=require("socket.io")

加入websocket服务

let ws=io(server)

事件监听

ws.on("connect",sock=>{   // sock 指当前链接的用户

        console.log("sss")

})

与前端连接，前端的操作

//引入接口

<script src="http://localhost:8080/socket.io/socket.io.js"></script>

//引入jQuery方法

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<script>

//引入socket，连接服务

let socket=io("ws://localhost:8088")

监听一个事件

socket.on("事件名称"，data=>{  //data代表数据

                sock.emit("student","你好")

                //登陆成功

                sock.username=data //数据传递

    })

</script>

群聊事件的监听

js编码

//输入群聊信息的监听

sock.on("addmessage",data=>{

        //群聊信息的发送

        ws.sockets.emit("showmessage",{username:sock.username,data:data})

})

前端编码

//群聊事件的监听

socket.on("showmessage",data=>{

        let p=$("<p />").html(data.username+":"+data.data)

        $(".message").append(p)；

})

断开事件的监听

sock.on("disconnect",()=>{

        if(sock.username){

                let username=sock.username

                let index=users.indexOf(username)  //先拿到所在数组中的位置

                users.splice(index,1);

                ws.sockets.emit("usersall",users)

        }

})

私聊时间的监听

//前端编码

//给所有用户添加一个独有的用户名监听

//添加一个用户名监听

socket.on("to"+data,data=>{

        console.log(data.uesrname+"对你说："+data.maeeage)

})

        //私聊用户的监听 接收

sock.on("addme",data=>{

        console.log(data)  //私聊的用户名加message

        ws.sockets.emit("to"+data.username,{message:data.message,uesrname:sock.username})

})