要使用WebSocket，關(guān)鍵在于服務(wù)器端支持，這樣，我們才有可能用支持WebSocket的瀏覽器使用WebSocket。

ws模塊

在Node.js中，使用最廣泛的WebSocket模塊是ws，我們創(chuàng)建一個hello-ws的VS Code工程，然后在package.json中添加ws的依賴：

"dependencies": {

"ws": "1.1.1"

}

整個工程結(jié)構(gòu)如下：

hello-ws/

|

+- .vscode/

| |

| +- launch.json

|

+- app.js

|

+- package.json

|

+- node_modules/

運(yùn)行npm install后，我們就可以在app.js中編寫WebSocket的服務(wù)器端代碼。

創(chuàng)建一個WebSocket的服務(wù)器實(shí)例非常容易：

// 導(dǎo)入WebSocket模塊:

const WebSocket = require('ws');

// 引用Server類:

const WebSocketServer = WebSocket.Server;

// 實(shí)例化:

const wss = new WebSocketServer({

port: 3000

});

這樣，我們就在3000端口上打開了一個WebSocket Server，該實(shí)例由變量wss引用。

接下來，如果有WebSocket請求接入，wss對象可以響應(yīng)connection事件來處理這個WebSocket：

wss.on('connection', function (ws) {

console.log(`[SERVER] connection()`);

ws.on('message', function (message) {

console.log(`[SERVER] Received: ${message}`);

ws.send(`ECHO: ${message}`, (err) => {

if (err) {

console.log(`[SERVER] error: ${err}`);

}

});

})

});

在connection事件中，回調(diào)函數(shù)會傳入一個WebSocket的實(shí)例，表示這個WebSocket連接。對于每個WebSocket連接，我們都要對它綁定某些事件方法來處理不同的事件。這里，我們通過響應(yīng)message事件，在收到消息后再返回一個ECHO: xxx的消息給客戶端。

創(chuàng)建WebSocket連接

現(xiàn)在，這個簡單的服務(wù)器端WebSocket程序就編寫好了。如何真正創(chuàng)建WebSocket并且給服務(wù)器發(fā)消息呢？方法是在瀏覽器中寫JavaScript代碼。

先在VS Code中執(zhí)行app.js，或者在命令行用npm start執(zhí)行。然后，在當(dāng)前頁面下，直接打開可以執(zhí)行JavaScript代碼的瀏覽器Console，依次輸入代碼：

// 打開一個WebSocket:

var ws = new WebSocket('ws://localhost:3000/test');

// 響應(yīng)onmessage事件:

ws.onmessage = function(msg) { console.log(msg); };

// 給服務(wù)器發(fā)送一個字符串:

ws.send('Hello!');

一切正常的話，可以看到Console的輸出如下：

MessageEvent {isTrusted: true, data: "ECHO: Hello!", origin: "ws://localhost:3000", lastEventId: "", source: null…}

這樣，我們就在瀏覽器中成功地收到了服務(wù)器發(fā)送的消息！

如果嫌在瀏覽器中輸入JavaScript代碼比較麻煩，我們還可以直接用ws模塊提供的WebSocket來充當(dāng)客戶端。換句話說，ws模塊既包含了服務(wù)器端，又包含了客戶端。

ws的WebSocket就表示客戶端，它其實(shí)就是WebSocketServer響應(yīng)connection事件時回調(diào)函數(shù)傳入的變量ws的類型。

客戶端的寫法如下：

let ws = new WebSocket('ws://localhost:3000/test');

// 打開WebSocket連接后立刻發(fā)送一條消息:

ws.on('open', function () {

console.log(`[CLIENT] open()`);

ws.send('Hello!');

});

// 響應(yīng)收到的消息:

ws.on('message', function (message) {

console.log(`[CLIENT] Received: ${message}`);

}

在Node環(huán)境下，ws模塊的客戶端可以用于測試服務(wù)器端代碼，否則，每次都必須在瀏覽器執(zhí)行JavaScript代碼。

同源策略

從上面的測試可以看出，WebSocket協(xié)議本身不要求同源策略(Same-origin Policy)，也就是某個地址為http://a.com的網(wǎng)頁可以通過WebSocket連接到ws://b.com。但是，瀏覽器會發(fā)送Origin的HTTP頭給服務(wù)器，服務(wù)器可以根據(jù)Origin拒絕這個WebSocket請求。所以，是否要求同源要看服務(wù)器端如何檢查。

路由

還需要注意到服務(wù)器在響應(yīng)connection事件時并未檢查請求的路徑，因此，在客戶端打開ws://localhost:3000/any/path可以寫任意的路徑。

實(shí)際應(yīng)用中還需要根據(jù)不同的路徑實(shí)現(xiàn)不同的功能。

參考源碼

總結(jié)

以上是生活随笔為你收集整理的js ws 状态_使用ws的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。