HTML5-WebSocket-HTML

一、HTML页面
修改websocket地址

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>WebSocketTest</title>
    <script type="text/javascript">
        function WebSocketTest()
        {
            if ("WebSocket" in window)
            {
                var ws = new WebSocket("ws://localhost:10002/");
                ws.onopen = function()
                {
                    ws.send(
                        JSON.stringify({
                            "method":"login",
                            "params":{"type":"manual"}
                        })
                    )
                    var data = "数据发送中...";
                    showResponse(data);
                };
                ws.onmessage = function (evt)
                {
                    var data = evt.data;
                    showResponse(data);
                };
                ws.onclose = function()
                {
                    var data = "连接已关闭...";
                    showResponse(data);
                };
            }
            else
            {
                alert("您的浏览器不支持 WebSocket!");
            }
        }
        function showResponse(data){
            var myDate = new Date();
            var mytime=myDate.toLocaleTimeString();
            var innerHtml = document.getElementById("response").innerHTML;
            innerHtml=innerHtml+mytime+"&nbsp&nbsp&nbsp&nbsp"+data+"<br/>";
            document.getElementById("response").innerHTML=innerHtml;
        }
    </script>
</head>
<body>
	<div >
		<a href="javascript:WebSocketTest()">运行 WebSocket</a>
	</div>
	<div id="response"></div>
</body>
</html>

二、HTML页面效果
点击"运行 WebSocket"可实时查看推送消息
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值