阅读 71

webSocket——原生JS+Node后端提供服务

git 项目地址 gitee.com/aorange98/w…

websocket绑定的事件与方法

new WebSocket(url,[protocol])

url:指定连接的 URL Websocket 使用ws或wss的统一资源标志符,类似HTTPS

protocol:指定了可接受的子协议。

        前端的话要需要给这个实例绑定这4个事件和实例化一下 并且与哪个地址建立连接
        open close error message

        webSocket实例化后ws有两个方法 
            Socket.send()   使用连接发送数据
            Socket.close()  关闭连接
复制代码

客户端:两个页面: entry.html --> 用户输入用户名的页面 index.html --> 发送的页面

entry.html

用户名:<input type="text" id="oinput">
    <button id="btn">进入聊天室内</button>
    
    btn.onclick = function () {
            if (oinput.value.length < 5) {
                alert("请输入不小于5位的用户名")
            } else {
                // 本地存用户名
                localStorage.setItem('username', oinput.value)

                // 存储完后跳转到index页面
                location.href = 'index.html'
            }

        }

复制代码

index.html

    let ws = new WebSocket('ws:localhost:8500');
        let username = "";
        let content = "";   // 内容

        // 点击事件 发送数据给服务器
        oId.addEventListener('click',()=>{
            let message = oIpt.value   // 获取输入的这个数据
            let timestamp = new Date().getTime()     // 获取发送的时间戳
            // 如果是空值 啥都不干
            if(message == ""){
                return 
            }
            // 这样子传递是不行的 像这种文本的需要让他变成字符串
            // ws.send({
            //     username,   // 用户名
            //     data,       // 数据
            //     timestamp,       // 时间戳
            // })

            // 所以应该如下写法
            ws.send(JSON.stringify({username,message,timestamp}))

            // 发送完后 清空输入框
            oIpt.value = ""
        })
        
        // open 事件   --- 进来之后 与服务器链接后就会触发 
        // 打开WebSocket连接后可以在open事件中立刻发送一条消息
        ws.addEventListener("open",(e)=>{    
            console.log("open",e)
            username = localStorage.getItem('username') 
            // 如果没有用户名字 那么返回进入页
            if(!username){
                location.href = "entry.html"
            }
        })

        // close 事件
        ws.addEventListener("close",(e)=>{
            console.log("close",e)
        })

        // error 事件
        ws.addEventListener("error",(e)=>{
            console.log("error",e)
        })

        // message 事件 --- 在这接收服务端广播返回来的信息
        ws.addEventListener("message",(e)=>{    
            console.log("message",e.data)
            renderPage(JSON.parse(e.data))
        })

        function renderPage(msg){
            var dom = `
                <ul id="list">
                    <li>
                        <div style="font-weight:800">
                            <span id="username">${msg.username}</span> --- <span id="time">${new Date(msg.timestamp).toLocaleString()}</span>
                        </div>
                        <div id="content">${msg.data}</div>
                    </li>
                </ul>
            `
            const oDiv = document.createElement('div')
            oDiv.innerHTML = dom
            document.getElementById('wrap').appendChild(oDiv)
        }


复制代码

后端

// 导入WebSocket模块:
const WebSocket = require('ws');
console.log(WebSocket)

// 引用server类 就是说真正的服务在大对象中的Server
const WebSocketServer = WebSocket.Server;

// ws:localhost:8500
const server = new WebSocketServer({
    port:8500
})

// console.log(server)

// open 事件 
server.on('open',()=>{
    console.log("webSocket open")
    
})

// 绑定close 事件
server.on('close',()=>{
    console.log("webSocket close")
})

// 绑定error 事件
server.on('error',()=>{
    console.log("webSocket error")
})

// 绑定connection 事件  
// 如果有WebSocket请求接入,server对象可以响应connection事件来处理这个WebSocket:
server.on('connection',(ws)=>{
    console.log("connection 只要有人连接,那么我就会被触发,有人进来了");

    // 在这里面绑定message 事件   msg是前端发送过来的数据
    // 接收前端传递的数据,最终需要广播出去给每一个客户端
    ws.on('message',(msg)=>{ 
        console.log("message")
        console.log(msg)

        // 那到底如何广播出去呢?server.clients 记录着保存所有连接到server上的客户端
        // 通过forEach遍历得到每一个用户
        server.clients.forEach(item=>{
            // item下有个send方法,把这msg广播出去再返回给前端 前端在message事件处理函数中就会收到
            item.send(msg)
        })
    })
})

复制代码
文章分类
前端
文章标签