js ws 状态_使用ws
要使用WebSocket，關(guān)鍵在于服務器端支持，這樣，我們才有可能用支持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/
運行npm install后，我們就可以在app.js中編寫WebSocket的服務器端代碼。
創(chuàng)建一個WebSocket的服務器實例非常容易：
// 導入WebSocket模塊:
const WebSocket = require('ws');
// 引用Server類:
const WebSocketServer = WebSocket.Server;
// 實例化:
const wss = new WebSocketServer({
port: 3000
});
這樣，我們就在3000端口上打開了一個WebSocket Server，該實例由變量wss引用。
接下來，如果有WebSocket請求接入，wss對象可以響應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的實例，表示這個WebSocket連接。對于每個WebSocket連接，我們都要對它綁定某些事件方法來處理不同的事件。這里，我們通過響應message事件，在收到消息后再返回一個ECHO: xxx的消息給客戶端。
創(chuàng)建WebSocket連接
現(xiàn)在，這個簡單的服務器端WebSocket程序就編寫好了。如何真正創(chuàng)建WebSocket并且給服務器發(fā)消息呢？方法是在瀏覽器中寫JavaScript代碼。
先在VS Code中執(zhí)行app.js，或者在命令行用npm start執(zhí)行。然后，在當前頁面下，直接打開可以執(zhí)行JavaScript代碼的瀏覽器Console，依次輸入代碼：
// 打開一個WebSocket:
var ws = new WebSocket('ws://localhost:3000/test');
// 響應onmessage事件:
ws.onmessage = function(msg) { console.log(msg); };
// 給服務器發(fā)送一個字符串:
ws.send('Hello!');
一切正常的話，可以看到Console的輸出如下：
MessageEvent {isTrusted: true, data: "ECHO: Hello!", origin: "ws://localhost:3000", lastEventId: "", source: null…}
這樣，我們就在瀏覽器中成功地收到了服務器發(fā)送的消息！
如果嫌在瀏覽器中輸入JavaScript代碼比較麻煩，我們還可以直接用ws模塊提供的WebSocket來充當客戶端。換句話說，ws模塊既包含了服務器端，又包含了客戶端。
ws的WebSocket就表示客戶端，它其實就是WebSocketServer響應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!');
});
// 響應收到的消息:
ws.on('message', function (message) {
console.log(`[CLIENT] Received: ${message}`);
}
在Node環(huán)境下，ws模塊的客戶端可以用于測試服務器端代碼，否則，每次都必須在瀏覽器執(zhí)行JavaScript代碼。
同源策略
從上面的測試可以看出，WebSocket協(xié)議本身不要求同源策略(Same-origin Policy)，也就是某個地址為http://a.com的網(wǎng)頁可以通過WebSocket連接到ws://b.com。但是，瀏覽器會發(fā)送Origin的HTTP頭給服務器，服務器可以根據(jù)Origin拒絕這個WebSocket請求。所以，是否要求同源要看服務器端如何檢查。
路由
還需要注意到服務器在響應connection事件時并未檢查請求的路徑，因此，在客戶端打開ws://localhost:3000/any/path可以寫任意的路徑。
實際應用中還需要根據(jù)不同的路徑實現(xiàn)不同的功能。
參考源碼
總結(jié)
以上是生活随笔為你收集整理的js ws 状态_使用ws的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 数据复制停止工作_linux
- 下一篇： django 模板两次for循环_Dja