4.JavaScript版本前端demo

最新推荐文章于 2023-06-18 07:50:49 发布

九宫格输入法

最新推荐文章于 2023-06-18 07:50:49 发布

阅读量2.8k

点赞数

分类专栏： Websocket 文章标签： rabbitmq linux zookeeper

本文链接：https://blog.csdn.net/Stubborn_bull/article/details/123742028

版权

Websocket 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text" value="123321" id="message" placeholder="请输入消息">
<button id="send">发送</button>


<script src="js/index.js"></script>
</body>
</html>

js

//立即执行函数
(function (doc,Socket) {
 const oMsg = doc.querySelector('#message');
 const oSendBtn = doc.querySelector('#send');
 const url ='ws:localhost:19733/api/message/server/'+oMsg.getAttribute('value');
 const ws = new Socket(url);

    //初始化函数
    const init =() =>{
        bindEvent();

    }
    function bindEvent() {
        oSendBtn.addEventListener('click',handleSendBtnClick,false);
        ws.addEventListener('open',handleOpen,false);
        ws.addEventListener('close',handleClose,false);
        ws.addEventListener('error',handleError,false);
        ws.addEventListener('message',handleMessage,false);
    }



    function handleSendBtnClick() {
        //实际业务每一分钟或者30秒发送一次心跳，用来检测服务是否挂掉
        ws.send(1);
        console.log('Send message');
    }

    function handleOpen(e) {
        console.log('Websocket open',e)
    }

    function handleClose(e) {
        console.log('Websocket close',e)
    }

    function handleError(e) {
        console.log('Websocket error',e)
    }

    function handleMessage(e) {
        console.log('Websocket message',e);
        console.log('接收到的具体内容=',e.data)
    }

 init();
})(document, WebSocket);