美文网首页
Websocket和Socket.io的区别及应用

Websocket和Socket.io的区别及应用

作者: 你瞅瞅你写的bug | 来源:发表于2020-11-16 11:06 被阅读0次

在之前的文章H5新特性--WebSocket中已详细介绍了websocket的应用,这里就不多赘述,如有不明白的可以翻看阅读。由于想完全搭建一个Websocket服务端比较麻烦,又耗费时间,接下来主要讲解实际应用中与Websocket相关的库。

一、Socket.io

实际应用中,如果需要Websocke进行双向数据通信,Socket.io是一个非常好的选择。其实github上面也有通过JS封装好的Websocket库,ws可用于client和基于node搭建的服务端使用,但是用起来相对繁琐,star相对Socket.io较少,所以不推荐使用。

Socket.io不是Websocket,它只是将Websocket和轮询 (Polling)机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时机制的相应代码。也就是说,Websocket仅仅是 Socket.io实现实时通信的一个子集。因此Websocket客户端连接不上Socket.io服务端,当然Socket.io客户端也连接不上Websocket服务端。

二、简单聊天实例

servce.js(服务端)

'use strict'

let express = require('express')
let path = require('path')
let app = express()
let server = require('http').createServer(app)
let io = require('socket.io')(server)

app.use('/', (req, res, next) => {
    res.status(200).sendFile(path.resolve(__dirname, 'index.html'))
})

io.on('connection', client => {
    console.log(client.id, '=======================')
    client.on('channel', data =>{
        console.log(data)
        io.emit('broadcast', data)
        // client.emit('channel', data)
    })
    client.on('disconnect', () =>{
        console.log('close')
    })
})

server.listen(3000, () => {
    console.log("The service listening on 3000 port")
})

index.html(客户端)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app</title>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.slim.js"></script>
</head>
<body>
    <input type="text" id="input">
    <button id="btn">send</button>
    <div id="content-wrap"></div>
</body>
    <script>
        window.onload = () => {
            let inputValue = null

            let socket = io('http://localhost:3000')
            socket.on('broadcast', data =>{
                let content = document.createElement('p')
                content.innerHTML = data
                document.querySelector('#content-wrap').appendChild(content)
            })
            
            let inputChangeHandle = (ev) => {
                inputValue = ev.target.value
            }
            let inputDom = document.querySelector("#input")
            inputDom.addEventListener('input', inputChangeHandle, false)

            let sendHandle = () => {                
                socket.emit('channel', inputValue)
            }
            let btnDom = document.querySelector("#btn")
            btnDom.addEventListener('click', sendHandle, false)
            

            window.onunload = () => {
                btnDom.removeEventListener('click', sendHandle, false)
                inputDom.removeEventListener('input', inputChangeHandle, false)
            }
        }
    </script>

</html>

新开几个客户端页面,其中一个页面输入value,其他几个页面马上收到value消息,简单的聊天页面就完成了,其中,客户端index.html页面不用服务端返回,自己随便创建个index.html是一样的。

参考文章:https://www.jianshu.com/p/970dcfd174dc

知识传播也是一种选择

相关文章

网友评论

      本文标题:Websocket和Socket.io的区别及应用

      本文链接:https://www.haomeiwen.com/subject/qtdobktx.html