一文教你如何優(yōu)雅的使用WebSocket
更新時間：2022年05月05日 09:37:22 作者：郭少
WebSocket最大特點就是服務(wù)器可以主動向客戶端推送信息,客戶端也可以主動向服務(wù)器發(fā)送信息,是真正的雙向平等對話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下
簡介
websocket是基于TCP的一種雙向通信協(xié)議。在此之前，一直是采用輪詢的方式進(jìn)行雙向通信，這種方式效率低下還非常浪費(fèi)資源。為了解決這種問題，websocket應(yīng)運(yùn)而生。
特性
- 雙向通信：websocket使得客戶端跟服務(wù)端之間交換數(shù)據(jù)變得更加簡單。允許服務(wù)器主動向客戶端推送數(shù)據(jù)。瀏覽器只需要和服務(wù)器完成一次握手，就可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
- 實時性強(qiáng): 服務(wù)器可以主動給客戶端推送數(shù)據(jù)，相比http請求需要先由客戶端發(fā)起請求，瀏覽器才會響應(yīng)，延遲明顯更少、時間更短。
- 連接保持：websocket連接創(chuàng)建成功后，只要連接不斷開，通信會一直保持，而且還會省略部分狀態(tài)信息（http請求可能每次請求都需要攜帶狀態(tài)信息）
使用場景
- 相對于http，websocket優(yōu)勢顯而易見。所以在一些實時通信上，都需要用到websocket，比如多媒體聊天、玩家游戲、頁面局部刷新、協(xié)同編輯等場景。
具體實現(xiàn)
- 介紹完了什么是websocket，下面介紹下如何實現(xiàn)websocket。
一、首先是服務(wù)端代碼，這里我用的是nodejs。
1、我們先新建一個websocket.js文件
// 創(chuàng)建websocket服務(wù)
const port = "8888"
const ws = require('nodejs-websocket');
const web_server = ws.createServer(function (conn) {
conn.on('text', function (text) {
console.log("發(fā)送的消息",text);
conn.sendText(`發(fā)送成功了,發(fā)送的消息為：${text}`)
});
conn.on('close', function (code, reason) {
console.log('關(guān)閉連接');
});
conn.on('error', function (code, reason) {
console.log('異常關(guān)閉');
});
}).listen(port);
exports.web_server = web_server2、在app.js里面進(jìn)行引入
const websocket = require("./websocket")3、最后啟動服務(wù)
node app
二、然后是客戶端代碼
① 在vue中使用
1、我們先在utils下新建一個websocket.js文件
let webSocket = null;
let socketOpen = false;
// 發(fā)送消息
export const doSend = (message) => {
if (socketOpen) {
webSocket.send(message)
}
}
// 初始化websocket
export const contactSocket = () => {
if ("WebSocket" in window) {
webSocket = new WebSocket("ws://192.168.1.100:8888/");
webSocket.onopen = function () {
console.log("連接成功！");
socketOpen = true
};
webSocket.onmessage = function (evt) {
var received_msg = evt.data;
console.log("接受消息：" + received_msg);
};
webSocket.onclose = function () {
console.log("連接關(guān)閉！");
};
}
}2、頁面引入文件
import { contactSocket, doSend } from '@/utils/contactSocket'3、具體使用實例
// 初始化websocket
contactSocket()
// 發(fā)送消息內(nèi)容
setTimeout(() => {
doSend("向服務(wù)端發(fā)送的消息")
}, 1000)② 在uniapp中使用
1、我們先在utils文件夾下新建一個websocket.js文件
let socketOpen = false;
// 發(fā)送消息
function doSend(message) {
if (socketOpen) {
uni.sendSocketMessage({
data: message
});
}
}
// 初始化websocket
function contactSocket() {
// 建立連接
uni.connectSocket({
url: 'ws://192.168.1.100:8888/'
});
// 連接錯誤
uni.onSocketError(function(res) {
console.log('WebSocket連接打開失敗，請檢查！');
});
// 打開了連接
uni.onSocketOpen(function() {
console.log('WebSocket連接已打開！');
socketOpen = true;
});
// 關(guān)閉連接
uni.onSocketClose(function(res) {
console.log('WebSocket 已關(guān)閉！');
});
// 接受消息
uni.onSocketMessage(function(res) {
console.log('收到服務(wù)器內(nèi)容：' + res.data);
});
}
module.exports = {
doSend,
websocketInit
}2、頁面引入文件
import { doSend, contactSocket } from '@/utils/websocket.js'3、具體使用實例
// 初始化websocket
contactSocket()
// 發(fā)送消息內(nèi)容
setTimeout(()=>{
doSend("向服務(wù)端發(fā)送的消息");
},1000)總結(jié)
到此這篇關(guān)于如何優(yōu)雅的使用WebSocket的文章就介紹到這了,更多相關(guān)優(yōu)雅使用WebSocket內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了JavaScript Window窗口對象屬性和使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Echarts可以幫助我們快速構(gòu)建柱狀圖、餅圖、條形圖,這對于多圖形化展示數(shù)據(jù)來說尤其方便,可幫助我們快速開發(fā),下面這篇文章主要給大家介紹了關(guān)于Echarts中l(wèi)egend屬性使用的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要來和大家一起深入探討如何使用JavaScript實現(xiàn)一個動態(tài)表單生成器,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
使用Promise鏈?zhǔn)秸{(diào)用解決多個異步回調(diào)的問題
這篇文章主要給大家介紹了使用Promise鏈?zhǔn)秸{(diào)用解決多個異步回調(diào)問題的方法，文中給出了詳細(xì)的介紹和示例代碼，有需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01
這篇文章主要為大家介紹了Python執(zhí)行js字符串常見方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
這篇文章主要介紹了js+cookies實現(xiàn)懸浮購物車的方法,涉及javascript數(shù)值計算與cookie的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
js圖片延遲加載(Lazyload)三種實現(xiàn)方式
這篇文章主要介紹了js延遲加載(Lazyload)三種實現(xiàn)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了詳解如何在JS代碼中消滅for循環(huán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組(9)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之input輸入框組,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
js貪吃蛇網(wǎng)頁版游戲特效代碼分享（挑戰(zhàn)十關(guān)）
這篇文章主要為大家詳細(xì)介紹了js貪吃蛇網(wǎng)頁版游戲特效，游戲總共有十關(guān)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08