WebSocket | html创建websocket链接_html websocket连接-优快云博客

本文链接：https://blog.youkuaiyun.com/qq825478739/article/details/127493195

这是一个HTML页面示例，展示了如何在浏览器中创建WebSocket连接到服务器。代码首先检查浏览器是否支持WebSocket，然后尝试连接到指定的ws://127.0.0.1:8901/alarmRtime/html地址，并发送授权信息。如果连接成功，错误或关闭，都有相应的处理函数发送消息。页面中有一个元素用于显示接收到的消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>