WebSocket的使用方法從

發(fā)布時(shí)間：2020-12-02 10:04:47 來(lái)源：億速云閱讀：439 作者：小新欄目：web開(kāi)發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)WebSocket的使用方法從，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

WebSocket的使用

WebSocket是HTML5的新協(xié)議，所以支持HTML5的瀏覽器都能直接使用WebSocket不需要額外安裝，什么開(kāi)發(fā)包，或者插件。

為了測(cè)試WebSocket我們需要簡(jiǎn)單的搞一個(gè)服務(wù)端程序。Node.js本身支持的協(xié)議包括TCP協(xié)議和HTTP協(xié)議，但不支持WebSocket，為了讓讓node也支持WebSocket，這里我選用ws模塊。

測(cè)試

創(chuàng)建一個(gè)名為testWebSocket的文件夾，使用npm init 初始化項(xiàng)目

WebSocket的使用方法從

配置package.json文件添加，這里選用ws的最新的版本

"dependencies": {
　　"ws": "^6.2.1"
}

在根目錄使用npm指令npm install --save，把ws相關(guān)依賴(lài)都拉下來(lái)。

WebSocket的使用方法從

然后創(chuàng)建一個(gè)名為myWebSocketServer.js的文件，一個(gè)簡(jiǎn)單的WebSocket服務(wù)端程序完成，

node myWebSocketServer.js先讓服務(wù)端跑起來(lái)。相關(guān)教程：webSocket 視頻教程

// 導(dǎo)入WebSocket模塊:
const WebSocket = require('ws');
let i = 1;

// 引用Server類(lèi):
const WebSocketServer = WebSocket.Server;

// 實(shí)例化:
const myWs = new WebSocketServer({
    port: 8080
});

myWs.on('connection', ws => {
    ws.on('message', message => {
        console.log('received: %s', message);
    });

    setInterval(() => {
        ws.send('Hello siegaii this is serverMessage!' + i);
        i++;
    }, 1000);

});

客戶(hù)端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<button id="test">hello siegaii</button>

<script>
    let ws = new WebSocket('ws://localhost:8080/testWebSocket');
    document.getElementById('test').addEventListener('click', () => {
        ws.send('Hello Siegaii this is clientMessage!');
    });

    // 響應(yīng)onmessage事件:
    ws.onmessage = (msg) => {
        console.log(msg);
    };

</script>
</body>
</html>

運(yùn)行結(jié)果如下

WebSocket的使用方法從

API

簡(jiǎn)單介紹下WebSocket的api

// WebSocket Api
let socket = new WebSocket(url, [protocol] ); // 實(shí)例化一個(gè)WebSocket對(duì)象建立連接
/**
* socket的readyState屬性
* 0 - 表示連接尚未建立。
* 1 - 表示連接已建立，可以進(jìn)行通信。
* 2 - 表示連接正在進(jìn)行關(guān)閉。
* 3 - 表示連接已經(jīng)關(guān)閉或者連接不能打開(kāi)。
*/
socket.readyState

/**
* 只讀屬性 bufferedAmount 已被 send() 放入正在隊(duì)列中等待傳輸，但是還沒(méi)有發(fā)出的 UTF-8 文本字節(jié)數(shù)。
*/
socket.bufferedAmount

/**
* WebSocket 事件
*/
socket.onopen(); //連接建立時(shí)觸發(fā)
socket.onmessage(); //客戶(hù)端接收服務(wù)端數(shù)據(jù)時(shí)觸發(fā)
socket.onerror(); //通信發(fā)生錯(cuò)誤時(shí)觸發(fā)
socket.onclose(); //連接關(guān)閉時(shí)觸發(fā)

/**
* WebSocket 方法
*/
Socket.send() //使用連接發(fā)送數(shù)據(jù)
Socket.close() //關(guān)閉連接

關(guān)于WebSocket的使用方法從就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

WebSocket的使用方法從

WebSocket的使用

測(cè)試

API

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽