亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

一文教你如何優(yōu)雅的使用WebSocket

 更新時(shí)間：2022年05月05日 09:37:22   作者：郭少  
WebSocket最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下

簡(jiǎn)介

websocket是基于TCP的一種雙向通信協(xié)議。在此之前，一直是采用輪詢的方式進(jìn)行雙向通信，這種方式效率低下還非常浪費(fèi)資源。為了解決這種問(wèn)題，websocket應(yīng)運(yùn)而生。

特性

  • 雙向通信：websocket使得客戶端跟服務(wù)端之間交換數(shù)據(jù)變得更加簡(jiǎn)單。允許服務(wù)器主動(dòng)向客戶端推送數(shù)據(jù)。瀏覽器只需要和服務(wù)器完成一次握手，就可以創(chuàng)建持久性的連接，并進(jìn)行雙向數(shù)據(jù)傳輸。
  • 實(shí)時(shí)性強(qiáng): 服務(wù)器可以主動(dòng)給客戶端推送數(shù)據(jù)，相比http請(qǐng)求需要先由客戶端發(fā)起請(qǐng)求，瀏覽器才會(huì)響應(yīng)，延遲明顯更少、時(shí)間更短。
  • 連接保持：websocket連接創(chuàng)建成功后，只要連接不斷開(kāi)，通信會(huì)一直保持，而且還會(huì)省略部分狀態(tài)信息（http請(qǐng)求可能每次請(qǐng)求都需要攜帶狀態(tài)信息）

使用場(chǎng)景

  • 相對(duì)于http，websocket優(yōu)勢(shì)顯而易見(jiàn)。所以在一些實(shí)時(shí)通信上，都需要用到websocket，比如多媒體聊天、玩家游戲、頁(yè)面局部刷新、協(xié)同編輯等場(chǎng)景。

具體實(shí)現(xiàn)

  • 介紹完了什么是websocket，下面介紹下如何實(shí)現(xiàn)websocket。

一、首先是服務(wù)端代碼，這里我用的是nodejs。

1、我們先新建一個(gè)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_server

2、在app.js里面進(jìn)行引入

const websocket = require("./websocket")

3、最后啟動(dòng)服務(wù)

node app

二、然后是客戶端代碼

① 在vue中使用

1、我們先在utils下新建一個(gè)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、頁(yè)面引入文件

import { contactSocket, doSend }  from '@/utils/contactSocket'

3、具體使用實(shí)例

// 初始化websocket
contactSocket()
// 發(fā)送消息內(nèi)容
setTimeout(() => {
  doSend("向服務(wù)端發(fā)送的消息")
}, 1000)

② 在uniapp中使用

1、我們先在utils文件夾下新建一個(gè)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/'
    });
    // 連接錯(cuò)誤
    uni.onSocketError(function(res) {
        console.log('WebSocket連接打開(kāi)失敗，請(qǐng)檢查！');
    });
    // 打開(kāi)了連接
    uni.onSocketOpen(function() {
        console.log('WebSocket連接已打開(kāi)！');
        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、頁(yè)面引入文件

import { doSend, contactSocket } from '@/utils/websocket.js'

3、具體使用實(shí)例

// 初始化websocket
contactSocket()
// 發(fā)送消息內(nèi)容
setTimeout(()=>{
    doSend("向服務(wù)端發(fā)送的消息");
},1000)

總結(jié)

到此這篇關(guān)于如何優(yōu)雅的使用WebSocket的文章就介紹到這了,更多相關(guān)優(yōu)雅使用WebSocket內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論