zoukankan      html  css  js  c++  java
  • WebSockets基础

    网络套接字是下一代WEB应用程序双向通信技术,它是基于一个独立的socket并且需要客户端浏览器支持HTML5。

    一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据。

    以下是创建一个新的WebSocket对象的API:

    var Socket = new WebSocket(url, [protocal] );

    这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议。

    WEB Socket属性:

    属性说明
    Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值:            
    1. 一个0值表示该连接尚未建立。

    2. 值为1表示连接建立和沟通是可能的。

    3. 值为2表示连接是通过将结束握手。

    4. 值为3表示连接已关闭或无法打开。

    Socket.bufferedAmount 读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。

    WEB Socket事件:

    事件处理程序说明
    open Socket.onopen 此事件发生在套接字建立连接。
    message Socket.onmessage 此事件发生时,客户端收到来自服务器的数据。
    error Socket.onerror 此事件发生时有任何通信错误。
    close Socket.onclose 此事件发生在连接关闭。

    WEB Socket方法:

    方法说明
    Socket.send() send(data)方法用来连接传输数据。
    Socket.close() close()方法将被用于终止任何现有的连接。

    WEB Socket例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script type="text/javascript">
    function WebSocketTest()
    {
      if ("WebSocket" in window)
      {
         alert("WebSocket is supported by your Browser!");
         // Let us open a web socket
         var ws = new WebSocket("ws://localhost:9998/echo");
         ws.onopen = function()
         {
            // Web Socket is connected, send data using send()
            ws.send("Message to send");
            alert("Message is sent...");
         };
         ws.onmessage = function (evt)
         {
            var received_msg = evt.data;
            alert("Message is received...");
         };
         ws.onclose = function()
         {
            // websocket is closed.
            alert("Connection is closed...");
         };
      }
      else
      {
         // The browser doesn't support WebSocket
         alert("WebSocket NOT supported by your Browser!");
      }
    }
    </script>
    </head>
    <body>
    <div id="sse">
       <a href="javascript:WebSocketTest()">Run WebSocket</a>
    </div>
    </body>
    </html>
  • 相关阅读:
    固定textview大小,根据文字多少调整字体自适应textview大小
    这可能是最全的禁用win10自动更新了
    Android Studio 3.0正式版填坑之路
    android studio 3.0之后版本自定义文件名生成apk文件
    Android Studio从2.3升级到3.1注意事项
    Android studio2.3.3升级3.1.2坑
    iterm2 快捷键大全
    php实现的短网址算法分享
    mysql远程连接命令
    Mac下安装与配置Go语言开发环境
  • 原文地址:https://www.cnblogs.com/B-bowen/p/3850494.html
Copyright © 2011-2022 走看看