WebSocket | html创建websocket链接

最新推荐文章于 2024-03-16 10:46:17 发布

一介草民丶

最新推荐文章于 2024-03-16 10:46:17 发布

阅读量2k

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq825478739/article/details/127493195

版权

html创建websocket链接

<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<div style="width:400px;margin:20px auto;border:1px solid lightgray;padding:20px;text-align:center;">
    websocket 返回消息：￥<span style="color:#ff4719" id="message">没收到消息</span>
</div>
</body>
<script type="text/javascript">
    var websocket=null;
    //判断浏览器是否支持websocket
    if('WebSocket' in window){
        websocket=new WebSocket("ws://127.0.0.1:8901/alarmRtime/html");
        websocket.onopen=function(){
            websocket.send("{\"type\":\"html\",\"authorization\":\"fd277a6e83b60b232256ebc43d4b5e5a\"}");
        }
        websocket.onerror=function(){
            websocket.send("测试客户端连接失败");
			send("测试客户端连接失败");
        }
        websocket.onclose=function(){
            websocket.send("测试客户端连接关闭");
			send("测试客户端连接关闭");
        }
        websocket.onmessage=function(e){
            console.log("onmessage-----------------",e)
            send(e.data);
        }
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            closeWebSocket();
        }
    }
    else {
        alert('当前浏览器 Not support websocket')
    }
    //将消息显示在网页上
    function send(e) {
        document.getElementById('message').innerHTML =e;
    }
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }
</script>
</html>