<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          HTML5的WebSocket的API,WebSocket API簡介

          時間:?2017-11-13閱讀:?1174標簽:?html5

          由于實際工作中很少接觸WebSocket,因為很少有業務需求要用到WebSocket。例如當一個審核請求后臺要通過異步實現,審核的http請求的結果(response)不能實時返回,前端這邊就不知道何時去更新頁面顯示狀態,這種場景我們最容易想到的處理方案是通過ajax的setTimeout或者setInterval長輪詢來去獲取后臺的處理結果實現,但是這樣的實現會造成HTTP的大量開銷,這時我們會可能想到用HTML5 的WebSocket,于是查閱網上資料,倒騰一下WebSocket這玩意。


          首先闡述一下WebSocket是什么?

          這個簡單,百度官方解釋 :WebSocket協議是基于TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通信——允許服務器主動發送信息給客戶端。

          我們知道,一個普通的http請求是一個request對應一個response,當然了http鏈接也會長鏈接和短連接的,長鏈接是在一定的期限內保持鏈接不斷開。然而這些請求過程都是客戶端主動的發起的,服務器則是被動的返回。

          而WebSocket是為了解決客戶端發起多個http請求到服務器必須要經過長時間的輪訓問題而產生的,在webSocket協議下客服端和瀏覽器可以同時發送信息。建立了WebSocket之后服務器不必在瀏覽器發送request請求之后才能發送信息到瀏覽器。這時的服務器已有主動權想什么時候發就可以發送信息到服務器。而且信息當中不必在帶有head的部分信息了,對于http的長鏈接通信來說,這種方式,不僅能降低服務器的壓力。而且信息當中也減少了部分多余的信息。


          第二,WebSocket應用場景

          簡單羅列了以下這些場景:社交訂閱場景上,您的訂閱消息實時更新;多家游戲的交互效果實時反饋;股票基金等金融消息瞬息萬變,幾乎每秒都在變化,實時看到這些變化尤其重要;體育實況的實時播報和多媒體聊天等。這些場景如何實現數據的實時更新,這時候WebSocket就能派上用場了。


          第三,webscoket Demo

          1 首先安裝 node 環境 
          2 安裝ws,ws是nodejs的一個WebSocket庫,可以用來創建服務

          https://github.com/websockets/ws 


          //服務器端 server.js
          
          var WebSocket = require('ws').Server;
          var wss = new WebSocket({port:8088});
          wss.on('connection',function(ws){
             console.log('ws');
             ws.on('message',function(mes){
                 console.log(mes);
             });
             ws.send('i get it');
          });
          
          //客戶端
          
          <script>
             if(!window.WebSocket){
                 alert('您的瀏覽器不支持WebSocket')
             }
             var ws = new WebSocket('ws://localhost:8088');
             //監聽消息
             ws.onmessage = function(event) {
                 console.log(new Date(),'client get a message ==',event.data);
             };
             // 打開WebSocket
             ws.onclose = function(event) {
                 //WebSocket Status:: Socket Closed
             };
             // 打開WebSocket
             ws.onopen = function(event) {
                 //WebSocket Status:: Socket Open
                 console.log(new Date(),'client send a message ==','hello websocket');
                 ws.send('hello websocket');
             };
             ws.onerror =function(event){
                 //WebSocket Status:: Error was reported
             };
          </script>
          
          
          //附:express上WebSocket服務器搭建
          
          const express = require('express');
          const http = require('http');
          const url = require('url');
          const WebSocket = require('ws');
          const app = express();
          app.use(function (req, res) {
           res.send({ msg: "hello" });
          });
          const server = http.createServer(app);
          const wss = new WebSocket.Server({ server });
          wss.on('connection', function connection(ws, req) {
           const location = url.parse(req.url, true);
           // You might use location.query.access_token to authenticate or share sessions
           // or req.headers.cookie (see http://stackoverflow.com/a/16395220/151312)
           ws.on('message', function incoming(message) {
             console.log('received: %s', message);
           });
           ws.send('something');
          });
          server.listen(8080, function listening() {
           console.log('Listening on %d', server.address().port);
          });


          運行結果: 


          第四,WebSocket相關API

          方法
          //關閉WebSocket連接或停止正在進行的連接請求。如果連接的狀態已經是closed,這個方法不會有任何效果
          void close(in optional unsigned long code, in optional DOMString reason);
          
          //通過WebSocket連接向服務器發送數據。
          void send(in DOMString data);
          void send(in DOMString data)
          void send(in ArrayBuffer data);
          void send(in Blob data);


          屬性
          屬性名類型描述
          binaryTypeDOMString一個字符串表示被傳輸二進制的內容的類型。取值應當是”blob”或者”arraybuffer”。”blob”表示使用DOMBlob 對象,而”arraybuffer”表示使用 ArrayBuffer 對象。
          bufferedAmountunsigned long調用 send() 方法將多字節數據加入到隊列中等待傳輸,但是還未發出。該值會在所有隊列數據被發送后重置為 0。而當連接關閉時不會設為0。如果持續調用send(),這個值會持續增長。只讀。
          extensionsDOMString服務器選定的擴展。目前這個屬性只是一個空字符串,或者是一個包含所有擴展的列表。
          oncloseEventListener用于監聽連接關閉事件監聽器。當 WebSocket 對象的readyState 狀態變為 CLOSED 時會觸發該事件。這個監聽器會接收一個叫close的 CloseEvent 對象。
          onerrorEventListener當錯誤發生時用于監聽error事件的事件監聽器。會接受一個名為“error”的event對象。
          onmessageEventListener一個用于消息事件的事件監聽器,這一事件當有消息到達的時候該事件會觸發。這個Listener會被傳入一個名為”message”的 MessageEvent 對象。
          onopenEventListener一個用于連接打開事件的事件監聽器。當readyState的值變為 OPEN 的時候會觸發該事件。該事件表明這個連接已經準備好接受和發送數據。這個監聽器會接受一個名為”open”的事件對象。
          protocolDOMString一個表明服務器選定的子協議名字的字符串。這個屬性的取值會被取值為構造器傳入的protocols參數。
          readyStateunsigned short連接的當前狀態。取值是 Ready state constants之一。 只讀。
          urlDOMString傳入構造器的URL。它必須是一個絕對地址的URL。只讀。

          第五,HTML5 WebSocket兼容性


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/98

          html5的文檔申明為什么是<!DOCTYPE html>

          文檔聲明就是文檔告訴游覽器該以什么樣的標準去解析它。游覽器可以解析的文檔可不止html,還有xhtml,xml...當然在這里我們并不需要知道xhtml、xml是什么以及和html的區別

          HTML5程序員需要掌握的重要技能

          現在參加HTML5培訓的人很多,但是能學到什么東西還有很多的小伙伴不是很清楚,本篇文章就帶讀者看一下一名專業的HTML5程序員需要掌握哪些技能。

          HTML5新特性總結

          HTML5發布于2014年,設計目的是為了在移動端支持多媒體。語義化標簽:section和article標簽都是獨立的分塊標簽,section跟隨意,article表示單獨的文字單元。

          html5新增主體結構元素有哪些?_各自的用途與使用

          html5新增元素:article元素,aside元素,nav元素,section元素,footer元素,header元素,figure元素,figcaption元素。article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內容。

          一起來看 HTML 5.2 中新的原生元素 <dialog>

          HTML 5.2 正式成為 W3C 的推薦標準(REC),其中,推出了一個新的原生模態對話框元素 <dialog>,乍一看,可能感覺它就是一個新增的元素,然而,作者最近在玩的時候,發現它確實是一個值得期待和很有意思的元素

          HTML5全局屬性匯總

          HTML5全局屬性:可以用來配置所有元素共有的行為,這種屬性稱為全局屬性,可以用在任何一個元素身上。包括:accesskey屬性、class屬性、contenteditable屬性、dir屬性、draggable屬性、dropzone屬性、hidden屬性等

          提示用戶升級瀏覽器代碼 不支持HTML5,請升級瀏覽器

          javascript提示用戶升級瀏覽器代碼],低于ie9的瀏覽器提示.傾向于提示用戶升級瀏覽器,而不是為了兼容老版瀏覽器.

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网