怎么在HTML5中使用WebSocket協(xié)議-創(chuàng)新互聯(lián)

怎么在HTML5中使用WebSocket協(xié)議？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

將樂ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！

WebSocket介紹

傳統(tǒng)的http也是一種協(xié)議，WebSocket是一種協(xié)議，使用http服務器無法實現(xiàn)WebSocket，

2.1.瀏覽器支持情況

基本主流瀏覽器都支持

怎么在HTML5中使用WebSocket協(xié)議

2.2.優(yōu)點

相對于http有如下好處：

1.客戶端與服務器只建立一個TCP連接，可以使用更少的連接。

2.WebSocket服務器端可以主動推送數(shù)據(jù)到客戶端，更靈活高效。

3.更輕量級的協(xié)議頭，減少數(shù)據(jù)傳送量。

對比輪訓機制

怎么在HTML5中使用WebSocket協(xié)議

3、WebSocket用法

我們了解WebSocket是什么，有哪些優(yōu)點后，怎么使用呢？

3.1.WebSocket創(chuàng)建

WebSocket使用了自定義協(xié)議，url模式與http略有不同，未加密的連接是ws://，加密的連接是wss://，WebSocket實例使用new WebSocket()方法來創(chuàng)建，

var ws = new WebSocket(url, [protocol] );

第一個參數(shù) url, 指定連接的 URL。第二個參數(shù) protocol 是可選的，指定了可接受的子協(xié)議。

3.2.WebSocket屬性

當創(chuàng)建ws對象后，readyState為ws實例狀態(tài)，共4種狀態(tài)

0 表示連接尚未建立。

1 表示連接已建立，可以進行通信。

2 表示連接正在進行關閉。

3 表示連接已經(jīng)關閉或者連接不能打開。

Tips：在發(fā)送報文之前要判斷狀態(tài)，斷開也應該有重連機制。

3.3.WebSocket事件

在創(chuàng)建ws實例對象后，會擁有以下幾個事件，根據(jù)不同狀態(tài)可在事件回調寫方法。

ws.onopen 連接建立時觸發(fā)
ws.onmessage 客戶端接收服務端數(shù)據(jù)時觸發(fā)
ws.onerror 通信發(fā)生錯誤時觸發(fā)
ws.onclose 連接關閉時觸發(fā)

ws.onmessage = (res) => {
  console.log(res.data);
};

ws.onopen = () => {
  console.log('OPEN...');
};

ws.onclose=()=>{
 console.log('CLOSE...');
}

3.4.WebSocket方法

ws.send() 使用連接發(fā)送數(shù)據(jù)(只能發(fā)送純文本數(shù)據(jù))
ws.close() 關閉連接

4、Demo演示

了解WebSocket的一些API之后，趁熱打鐵，做一個小案例跑一下。

4.1.Node服務器端

WebSocket協(xié)議與Node一起用非常好，原因有以下兩點：

1.WebSocket客戶端基于事件編程與Node中自定義事件差不多。

2.WebSocket實現(xiàn)客戶端與服務器端長連接，Node基本事件驅動的方式十分適合高并發(fā)連接

創(chuàng)建一個webSocket.js如下：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        ws.send('我收到了' + message);
    });
});

打開windows命令窗口運行

怎么在HTML5中使用WebSocket協(xié)議

4.2.HTML客戶端

新建一個index.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket小Demo</title>
</head>
<body>
    <div class="container">
        <div>
            <input type="text" id="msg">
            <button onclick="sendMsg()">發(fā)送報文</button>
        </div>
    </div>
    <script>
        const ws = new WebSocket('ws://localhost:8080');
        ws.onmessage = (res) => {
            console.log(res);
        };
        ws.onopen = () => {
            console.log('OPEN...');
        };
        ws.onclose = () => {
            console.log('CLOSE...');
        }
        function sendMsg() {
            let msg = document.getElementById('msg').value;
            ws.send(msg);
        }
    </script>
</body>

打開瀏覽器依次輸入字符1,2,3，每次輸入完點擊發(fā)送報體，可見在ws.onmessage事件中res.data中返回來我們發(fā)的報文

怎么在HTML5中使用WebSocket協(xié)議

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設公司，的支持。

文章標題：怎么在HTML5中使用WebSocket協(xié)議-創(chuàng)新互聯(lián)
路徑分享：http://aaarwkj.com/article38/dopjpp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、企業(yè)網(wǎng)站制作、虛擬主機、電子商務、外貿(mào)建站、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

怎么在HTML5中使用WebSocket協(xié)議-創(chuàng)新互聯(lián)