vue socket_demo即时通讯

使用socket.io进行实时通信与授权示例

最新推荐文章于 2024-09-18 11:09:32 发布

原创最新推荐文章于 2024-09-18 11:09:32 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了一个使用socket.io在Web应用中建立WebSocket连接，实现客户端与服务器间的通信，包括连接、断开、消息发送以及带有身份验证的事件处理示例。

 <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/4.4.1/socket.io.min.js"></script>
    <title>socket.io</title>
</head>
    <button onclick="send()">发送信息</button>
<body>
    <script>
        var socket = null
        function initWebSocket() {
            socket = io.connect('ws://192.168.1.43:9050', {
                timeout: 300000,
                reconnectionDelayMax: 1000,
                reconnectionDelay: 500,
                extraHeaders: {
                    "Authorization": "Token eyJhbGciOiJIUzUxMiIsImlhdCI6MTY2MzcyMzM1NywiZXhwIjoxNjYzODA5NzU3fQ.eyJ1c2VybmFtZSI6InJvb3QifQ.zxddOSck1-lw2p2OD5zCVNbaqm8lS4v4C0woWbrSLdyhWnhSb3HCT6PaXyjvvoCwwfoQi2QoTL279_cqXTOHUA"
                }
            })
            socket.on('connect', function() {
                console.log('建立链接')
                //socket.emit('message', '123123')
            })
            socket.on('disconnect', function() {
                console.log('连接断开')
                //socket.emit('message', { 'token': 'eyJhbGciOiJIUzUxMiIsImlhdCI6MTY2MzIzMTA3NCwiZXhwIjoxNjYzMzE3NDc0fQ.eyJ1c2VybmFtZSI6InJvb3QifQ.Y4wuHO3_nrdYiX2DVGyo7CaWvqu65AwImoVRGrFWombVlV_Au26heq-T54nHR033fnlAE25fTZWGfUIqnZOCUw' });
            })
            socket.on('message', function(msg) {
                console.log(msg)
            })
            socket.on('task_process', function(msg) {
                console.log('task_process event')
                console.log(msg)  
            })
            socket.on('notice_count', function(msg) {
                console.log('notice_count event')
                console.log(msg)  
            })
        }
        function send(){
            socket.send('message_server', { 'data': 'I\'m disconnected!' })
        }

        initWebSocket()
    </script>
</body>

</html>