websockets 前端访问代码

最新推荐文章于 2024-08-21 15:56:08 发布

PascalMing

最新推荐文章于 2024-08-21 15:56:08 发布

阅读量149

点赞数

分类专栏：编程文章标签： websocket 前端 asp.net

本文链接：https://blog.csdn.net/yuming/article/details/116746276

版权

编程专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一段websockets 前端访问代码，连接ws服务端，接收信息倒序显示在窗体

aps.net有完整的Demo，位置：https://github.com/dotnet/AspNetCore.Docs/tree/main/aspnetcore/fundamentals/websockets/samples/2.x/WebSocketsSample

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>PascalMing WebSocketTest</title>
   </head>
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">发送</a>
         <a href="javascript:fnClear()">清除</a>
      </div>
      <div >
         <h2 id="wsmsgId">wait...</h2>
      </div>
   </body>
      <script type="text/javascript">
               var ws = new WebSocket("wss://localhost:5001/ws");
               var divId = document.getElementById("wsmsgId");
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("send data"+(new Date()));
                  //alert("数据发送中...");
               };
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  //alert("数据已接收..."+received_msg);
   		          divId.innerHTML =received_msg + '<br>' +divId.innerHTML;
               };
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
               function WebSocketTest()
               {
                  ws.send("send data"+(new Date()));
               };
               function fnClear()
               {
                  divId.innerHTML ="";
               }
      </script>
</html>