js--webSocket入門

Websocket

1.websocket是什么?

WebSocket是為解決客戶端與服務端實時通信而產生的技術。其本質是先通過HTTP/HTTPS協議進行握手后創建一個用于交換數據的TCP連接,

此后服務端與客戶端通過此TCP連接進行實時通信。

2.websocket的優點

以前我們實現推送技術,用的都是輪詢,在特點的時間間隔有瀏覽器自動發出請求,將服務器的消息主動的拉回來,在這種情況下,我們需要不斷的向服務器 發送請求,然而HTTP request 的header是非常長的,里面包含的數據可能只是一個很小的值,這樣會占用很多的帶寬和服務器資源。會占用大量的帶寬和服務器資源。

WebSocket API最偉大之處在于服務器和客戶端可以在給定的時間范圍內的任意時刻,相互推送信息。在建立連接之后,服務器可以主動傳送數據給客戶端。

此外,服務器與客戶端之間交換的標頭信息很小。

WebSocket并不限于以Ajax(或XHR)方式通信,因為Ajax技術需要客戶端發起請求,而WebSocket服務器和客戶端可以彼此相互推送信息;

關于ajax,comet,websocket的詳細介紹,和websocket報文的介紹,大家可以參看http://www.shaoqun.com/a/54588.aspx? 網頁設計]Ajax、Comet與Websocket,

我如果以后有時間,也會寫出來的

3.如何使用websocket

客戶端

在支持WebSocket的瀏覽器中,在創建socket之后。可以通過onopen,onmessage,onclose即onerror四個事件實現對socket進行響應

一個簡單是示例

var ws = new WebSocket(“ws://localhost:8080”);

ws.onopen = function(){  console.log(“open”);ws.send(“hello”);};ws.onmessage = function(evt){console.log(evt.data)};ws.onclose = function(evt){console.log(“WebSocketClosed!”);};ws.onerror = function(evt){console.log(“WebSocketError!”);};

?

1.var ws = new WebSocket(“ws://localhost:8080”);

申請一個WebSocket對象,參數是需要連接的服務器端的地址,同http協議使用http://開頭一樣,WebSocket協議的URL使用ws://開頭,另外安全的WebSocket協議使用wss://開頭。

ws.send(“hello”);
用于叫消息發送到服務端
2.ws.onopen = function() { console.log(“open”)};

當websocket創建成功時,即會觸發onopen事件
3.ws.onmessage = function(evt) { console.log(evt.data) };
當客戶端收到服務端發來的消息時,會觸發onmessage事件,參數evt.data中包含server傳輸過來的數據
4.ws.onclose = function(evt) { console.log(“WebSocketClosed!”); };

當客戶端收到服務端發送的關閉連接的請求時,觸發onclose事件
5.ws.onerror = function(evt) { console.log(“WebSocketError!”); };
如果出現連接,處理,接收,發送數據失敗的時候就會觸發onerror事件
我們可以看出所有的操作都是采用事件的方式觸發的,這樣就不會阻塞UI,使得UI有更快的響應時間,得到更好的用戶體驗。

?

轉?https://www.cnblogs.com/lxtblogs/p/4947898.html

?

轉載于:https://www.cnblogs.com/fps2tao/p/7875452.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370543.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370543.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370543.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

node.js繼承

person.js module.exports function(){   this.name "person";   this.sleep function(){     console.log("sleep in the night");   }   this.eat function(){     console.log(eat food);   }} student.js var util require(&qu…

研究死鎖–第5部分:使用顯式鎖定

在我的上一個博客中,我研究了使用Java的傳統synchronized關鍵字和鎖排序來修復破碎的,死鎖的余額轉移示例代碼。 但是,有一種替代方法稱為顯式鎖定。 這里,將鎖定機制稱為顯式而非隱式的想法是, 顯式表示它不是Java語…

mysql 經典入門教程_MySQL 經典入門教程

MySQL 經典入門教程1 定義數據庫中的表:一行叫一條記錄。每一列叫一個屬性,或一個字段。主鍵:表中的某個特殊字段,具有唯一的確定的值,可以根據該字段唯一的確定一條記錄外鍵:表中的某個字段的值為另一張表…

druid連接池初始化慢_7、SpringBoot -連接池(Durid)

一導入相關核心包<dependencies>二 在application.ymlspring三、配置Druid Datasource(可選)Configuration五、監控訪問 http://localhost:8080/druid&#xff0c; 使用上面配置的賬號密碼。四、自動配置原理源代碼Configuration說明DataSourceProperties 配置相關 首先找…

負載均衡與反向代理

如果用域名 映射多了Ip &#xff1b; 外網應該用來實現 GSLB 1 輪詢pstream nginxDemo { server 127.0.0.1:8081; server 127.0.0.1:8082; } 最少鏈接web請求會被轉發到連接數最少的服務器上。 upstream nginxDemo { least_conn; server 127.0.…

使用工廠方法模式設計最佳實踐

在前面的“設計模式”示例中&#xff0c;我們解釋了當今常用的“工廠”模式。 在本節中&#xff0c;我們將了解具有更多抽象的更高級的解決方案。 該模式稱為工廠方法設計模式。 定義&#xff1a; Factory方法模式提供了一種用于創建對象的方法&#xff0c;但是將對象創建委托…

偏導數

引入 一元函數導數&#xff1a; 在一元函數中&#xff0c;我們已經知道導數就是函數的變化率&#xff08;對于一個一元函數&#xff0c;x增大了多少&#xff0c;y增大了多少&#xff0c;這個就是變化率&#xff09;。對于二元函數我們同樣要研究它的“變化率”。在xOy平面內&am…

qt繪制一圈圓_Qt繪制圓

最近開始折騰Qt了&#xff0c;手頭上的一個項目需要用到Qt來繪制一些簡單圖像。記錄下Qt繪制圓的過程&#xff1a;對于以A為圓心&#xff0c;半徑為R的圓&#xff0c;外部有一個外切的正方形&#xff0c;正方形上有B點。如下圖所示&#xff1a;對于void QPainter::drawArc(int …

前端基礎之HTML

HTML介紹 Web服務本質 import socketsk socket.socket()sk.bind(("127.0.0.1", 8080)) sk.listen(5)while True:conn, addr sk.accept()data conn.recv(8096)conn.send(b"HTTP/1.1 200 OK\r\n\r\n")conn.secd(b"<h1>Hello world!</h1&g…

指令引用了 內存 該內存不能為read 一直彈窗_【翻譯】使用Rust測試ARM和X86內存模型

原文標題: The Story of Tail Call Optimizations in Rust 原文標題: Examining ARM vs X86 Memory Models with Rust原文鏈接: https://www.nickwilcox.com/blog/arm_vs_x86_memory_model/公眾號&#xff1a; Rust碎碎念蘋果公司最近宣布&#xff0c;他們將要把筆記本和桌面電…

Docker應用二:docker常用命令介紹

Docker常用命令使用介紹 docker中常用的命令: 1、docker search image_name:搜查鏡像 2、docker pull image_name:從鏡像庫中拉去鏡像 3、docker run image_name:運行容器 --restartalways:容器退出后重新啟動 --name:自定容器名字 --d:后臺運行容器 --i:交互模式 --t:打開一個…

關于Ubuntu使用筆記

Ubuntu vm tools 安裝 sudo apt install open-vm-tools-desktop 在安裝程序時Ubuntu會將安裝目錄鎖定&#xff0c;安裝結束后會解除鎖定&#xff0c;中斷安裝后無法再安裝其他軟件解決方案 E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavail…

具有可執行Tomcat的獨立Web應用程序

在部署應用程序時&#xff0c;簡單性是最大的優勢。 您將了解到&#xff0c;尤其是在項目發展且需要在環境中進行某些更改時。 將整個應用程序打包到一個獨立且自足的JAR中似乎是個好主意&#xff0c;尤其是與在目標環境中安裝和升級Tomcat相比。 過去&#xff0c;我通常將Tomc…

css網頁中設置背景圖片的方法詳解

在css代碼中設置背景圖片的方法&#xff0c;包括背景圖片、背景重復、背景固定、背景定位等 用css設置網頁中的背景圖片&#xff0c;主要有如下幾個屬性&#xff1a; 1&#xff0c;背景顏色 {">說明&#xff1a;參數取值和顏色屬性一樣 注意&#xff1a;在HTML當中&am…

node-sass安裝不成功的問題

SASS_BINARY_SITEhttps://npm.taobao.org/mirrors/node-sass/ npm install node-sass 簡單粗暴的執行上述的命令。轉載于:https://www.cnblogs.com/czaiz/p/6918114.html

npm升級依賴包_Taro跨端開發之依賴管理

昨天跑的好好項目,今天跑不起來我們在開發周期比較長的前端項目的時候,必然會遇到依賴管理的問題. 我們在開發項目的時候,我們用了大量的三方庫.這些三方的依賴庫時不時的會更新自己的代碼.第三方依賴庫的代碼更新會很容易造成代碼運行的不穩定, 比如昨天還跑的好好的項目,另一…

QOTD:Java線程與Java堆空間

以下問題很常見&#xff0c;并且與OutOfMemoryError有關&#xff1a;在JVM線程創建過程和JVM線程容量期間無法創建新的本機線程問題。 這也是我向新技術候選人&#xff08;高級職位&#xff09;提出的典型面試問題。 我建議您在查看答案之前嘗試提供自己的答復。 題&#xff1…

sql查詢重復項

select * from [表A] where id in (select id from [表A] group by id having count(id) >1 )轉載于:https://www.cnblogs.com/wuyujie/p/7885017.html

java util logging_簡單日志記錄,使用java.util.logging

jspservletJavaBean模式下,可以做個簡單的日志記錄,日志文件保存在服務器.(Tomcat)package controller;import java.io.File;import java.io.IOException;import java.util.logging.FileHandler;import java.util.logging.Level;import java.util.logging.Logger;import javax.…

超級高鐵

超級高鐵 作者&#xff1a;武培&#xff0c;高培焱 作品來源&#xff1a;實踐 美國電動汽車公司特斯拉和美國科技公司ET3都公布了“真空管鋼運輸”計劃&#xff0c;特斯拉將其命名為“超級高鐵”&#xff0c;ET3因列車外觀酷似膠囊因而稱之為“吃膠囊”列車。根據ET3公司的介紹…