WebSocket實戰之JavaScript例子

時間 2019-12-11

標籤 websocket 實戰 javascript 例子欄目 JavaScript 简体版

原文原文鏈接

1、詳細代碼案例

詳細解讀一個簡單html5 WebSocket的Js實例教程,附帶完整的javascript websocket實例源碼，以及實例代碼效果演示頁面，並對本實例的核心代碼進行了深刻解讀。javascript

從WebSocket通信三個階段（打開握手、數據傳遞、關閉握手）進行了探討，各階段中瀏覽器和服務器作了些什麼事情也有所涉及。html

//檢查瀏覽器是否支持WebSocket
if(window.WebSocket){
    console.log('This browser supports WebSocket');
}else{
    console.log('This browser does not supports WebSocket');
}

Html演示代碼html5

<!DOCTYPE html> 
<meta charset="utf-8" /> 
<title>WebSocket Test</title> 
<script language="javascript"type="text/javascript"> 
    var wsUri ="ws://echo.websocket.org/";
    var output; 
     
    function init() {
        output = document.getElementById("output");
        testWebSocket();
    } 
  
    function testWebSocket() {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) {
            onOpen(evt)
        };
        websocket.onclose = function(evt) {
            onClose(evt)
        };
        websocket.onmessage = function(evt) {
            onMessage(evt)
        };
        websocket.onerror = function(evt) {
            onError(evt)
        };
    } 
  
    function onOpen(evt) {
        writeToScreen("CONNECTED");
        doSend("WebSocket rocks");
    } 
  
    function onClose(evt) {
        writeToScreen("DISCONNECTED");
    } 
  
    function onMessage(evt) {
        writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>');
        websocket.close();
    } 
  
    function onError(evt) {
        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
    } 
  
    function doSend(message) {
        writeToScreen("SENT: " + message); 
        websocket.send(message);
    } 
  
    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    } 
  
    window.addEventListener("load", init, false); 
</script> 
<h2>WebSocket Test</h2> 
<div id="output"></div> 
</html>

2、主要代碼解讀：

一、申請一個WebSocket對象java

參數是須要鏈接的服務器端的地址，同http協議使用http://開頭同樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭。web

var wsUri ="ws://echo.websocket.org/";
websocket = new WebSocket(wsUri);

二、WebSocket對象一共支持四個消息 onopen, onmessage, onclose和onerror瀏覽器

咱們能夠看出全部的操做都是採用消息的方式觸發的，這樣就不會阻塞UI，使得UI有更快的響應時間，獲得更好的用戶體驗。安全

（1）當Browser和WebSocketServer鏈接成功後，會觸發onopen消息;服務器

websocket.onopen = function(evt) {};

（2）若是鏈接失敗，發送、接收數據失敗或者處理數據出現錯誤，browser會觸發onerror消息;websocket

websocket.onerror = function(evt) { };

（3）當Browser接收到WebSocketServer發送過來的數據時，就會觸發onmessage消息，參數evt中包含server傳輸過來的數據;app

websocket.onmessage = function(evt) { };

（4）當Browser接收到WebSocketServer端發送的關閉鏈接請求時，就會觸發onclose消息。

websocket.onclose = function(evt) { };

本文參考地址：http://www.javashuo.com/article/p-popzpsvp-gn.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。