当前位置：网站首页>websocket总结

上面的响应码101表示本次连接的http协议即将被更改，更改后的协议就是upgrade：websocket指定的websocket协议
版本号和子协议规定了双方都能理解的数据格式，以及是否支持压缩等等，如果仅用websocket的API则不需要关心这些
一个websocket连接就建立成功，浏览器和服务器可以随时的主动发送消息给对方。消息有2种，一种是文本，一种是二进制数据，通常，我们可以发送JSON格式的文本，这样在浏览器处理起来就十分容易
安全的websocket连接机制和https类似。首先，浏览器用wss：//xxx创建websocket连接时，会先通过https创建安全的连接，然后，该https连接升级为websocket连接，底层通信走的依然是安全的SSL/TLS协议
websocket协议对于有一些低版本的浏览器可能不支持

基于node.js的websocket模块

ws模块
socket.io模块

ws模块

npm初始化：npm init
安装ws模块：npm i ws

常用场景：一个服务端服务于多个客户端

服务端

const express=require("express")
const app=express()
app.use(express.static("./public"))
//http响应
app.get("/",(req,res)=>{
    res.send({ok:1})
})
app.listen(5000)
//websocket响应
const {WebSocket}=require("ws")
const wss=new WebSocket.WebSocketServer({port:8080})
wss.on('connection',function connection(ws){
    ws.on('message',function message(data){
        console.log("收到：%s",data);
        //转发给其他人
        wss.clients.forEach(function each(client){
            if(client!==ws&&client.readyState===WebSocket.OPEN){
                client.send(data,{binary:false})
            }
        })
    })
    ws.send('欢迎来到聊天室')
    //当有客户端断开连接时触发
    ws.on("close",()=>{
        console.log("帅哥走了");
    })
})

客户端

//chat.html文件内
<body>
    <h1>聊天室客户端</h1>
</body>
<script>
    //创建websocket连接
    var ws=new WebSocket("ws://localhost:8080")
    //打开连接成功后走的回调函数
    ws.onopen=function(){
        console.log("连接成功");
        //发送消息
        ws.send("hello world")
    }
    //每次服务端发消息时触发的回调函数
    ws.onmessage=function(msgObj){
        console.log(msgObj.data);
    }
    //连接失败时走onerror回调函数
    ws.onerror=function(){
        console.log("连接失败");
    }
    //服务器宕机时走的回调函数
    ws.onclose=function(){
        console.log("服务器宕机");
    }
</script>

注意：静态文件夹为public，里面有chat.html页面

访问：http://localhost:5000/chat.html

socket.io模块

npm初始化：npm init
安装socket.io模块：npm i socket.io

服务端

//服务端
const http=require("http")
const fs=require("fs")
const app=http.createServer()

app.on("request",(req,res)=>{
   fs.readFile(__dirname+"/index.html",function(err,data){
    if(err){
        res.writeHead(500)
        return res.end("Error loading index.html")
    }
    res.writeHead(200)
    res.end(data)
   })
})
app.listen(3000,()=>{
    console.log("server start");
})
//下面引入代码必须在app监听完端口的后面
const io=require("socket.io")(app)
//监听了用户连接的事件，只要用户连接，便会触发该事件
//socket表示用户的连接，socket.emit表示触发某个事件，socket.on表示监听某个事件
io.on("connection",socket=>{
    console.log("新用户连接了");
    //socket.emit的方法应该用于给浏览器发送数据
    //参数1：事件名字-名字随意写
    //服务器发送数据给客户端
    socket.emit("get",{name:"cjc"})
    //服务器从客户端接收数据
    socket.on("send",data=>{
        console.log(data);
    })
})

客户端

引入socket.io.js文件：<script src="/socket.io/socket.io.js"></script>

<!-- index.html页面内 -->
<body>
    <script src="/socket.io/socket.io.js"></script>
    <h1>node.js聊天室</h1>
    <script>
        //连接socket服务,参数为服务器地址
        var socket=io("http://localhost:3000")
        //接收服务器返回的数据
        socket.on("get",data=>{
            console.log(data);
        })
        //向服务器发送数据
        socket.emit("send","我想发送数据")
    </script>
</body>