首页 > 其他分享 >websocket html网页

websocket html网页

时间:2022-11-22 15:57:00浏览次数:42  
标签:function 网页 html 关闭 close websocket 连接 setMessageInnerHTML

<html>
<body>

    Welcome<br/>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message"></div>
    
</body>

<script type="text/JavaScript">
      var websocket = null;
      
      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window){
          websocket = new WebSocket("ws://localhost:8086/ws");
      }
      else{
          alert('Not support websocket');
      }    
      //连接发生错误的回调方法
      websocket.onerror = function(){
          setMessageInnerHTML("error");
      };     
      //连接成功建立的回调方法
      websocket.onopen = function(event){
          setMessageInnerHTML("open");
      };      
      //接收到消息的回调方法
      websocket.onmessage = function(){
          setMessageInnerHTML(event.data);
      };     
      //连接关闭的回调方法
      websocket.onclose = function(){
          setMessageInnerHTML("close");
      };       
      //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
      window.onbeforeunload = function(){
          websocket.close();
      };       
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML){
          document.getElementById('message').innerHTML += innerHTML + '<br/>';
      } 
      //关闭连接
      function closeWebSocket(){
          websocket.close();
      }  
      //发送消息
      function send(){
          var message = document.getElementById('text').value;
          websocket.send(message);
      }
  </script>


</html>

标签:function,网页,html,关闭,close,websocket,连接,setMessageInnerHTML
From: https://www.cnblogs.com/rbcd/p/16915346.html

相关文章

  • .NET C#获取当前网页地址信息
    .NETC#获取当前网页地址信息.NETC#获取当前网页地址信息.NETC#获取当前网页地址信息设当前页完整地址是:http://www.jb51.net/aaa/bbb.aspx?id=5&name=kelli"http:......
  • HTML-样式
    1 style属性用于改变HTML元素的样式。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Lightly-HTML-Project</title><......
  • 自己学网页编程。
    自学网页编程的CSS代码展示:*{  margin:0;  padding:0;}.w{  width:1200px;  margin:auto;}body{  background-color:#f3f5f7; ......
  • 自动获取网页内容,然后写入excel文档中
     今天需要将北京物业公司名称以及电话给整理出来,发现爱帮网上的数据比较多,自己一个一个的去摘取,太麻烦了,于是写一段代码来完成,并自动写入excel文档中,主要用的Jsoup以及jxl......
  • 网页整理
    程序员职业规划:https://www.cnblogs.com/zuoxiaolong/p/life15.htmlhttps://www.cnblogs.com/zuoxiaolong/p/life35.html我要去哪里?-写在我的30岁-掘金(juejin.c......
  • 基于HTML5的爱心表白动画特效
    从视觉上看,它也是一个爱心轮廓,但是不同的是这个爱心轮廓由许多跳动的小爱心组成,更加有一种3D立体的效果。1.运行效果2.代码构成<!doctypehtml><html><head><metacharset......
  • python爬取网页的多种方式以及保存方法
    爬取网页信息并保存bs4和lxml都是用来将接收的数据解析html1.bs4+excel(openpyxl):importrequestsfrombs4importBeautifulSoupfromopenpyxlimportWorkbookwb......
  • HTML转Canvas转图片下载
    如题HTML元素转Canvas再转图片然后下载需要用到插件:html2canvas可自行到官网下载最新版本 效果图:  示例代码:<!doctypehtml><html><head><metacharset=......
  • python3 请求webSocket实例
    网上搜了好久,没看到python写的webSocketClient这里贴个示例供大家参考,测过了asyncdefwebSocketClient(self,url,sendData,headers,breakTag):"""......
  • 网页动画的12原则,帮你做出漂亮的动画效果
    译者| @EthonLau作者|@donovanh原文| https://cssanimation.rocks/principles/作为前端的设计师和工程师,我们用css去做样式、定位并创建出好看的网站。我们经常用......