怎么優雅的使用WebSocket

這篇“怎么優雅的使用WebSocket”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“怎么優雅的使用WebSocket”文章吧。

簡介

websocket是基于TCP的一種雙向通信協議。在此之前，一直是采用輪詢的方式進行雙向通信，這種方式效率低下還非常浪費資源。為了解決這種問題，websocket應運而生。

特性

• 雙向通信：websocket使得客戶端跟服務端之間交換數據變得更加簡單。允許服務器主動向客戶端推送數據。瀏覽器只需要和服務器完成一次握手，就可以創建持久性的連接，并進行雙向數據傳輸。

• 實時性強: 服務器可以主動給客戶端推送數據，相比http請求需要先由客戶端發起請求，瀏覽器才會響應，延遲明顯更少、時間更短。

• 連接保持：websocket連接創建成功后，只要連接不斷開，通信會一直保持，而且還會省略部分狀態信息（http請求可能每次請求都需要攜帶狀態信息）

使用場景

• 相對于http，websocket優勢顯而易見。所以在一些實時通信上，都需要用到websocket，比如多媒體聊天、玩家游戲、頁面局部刷新、協同編輯等場景。

具體實現

• 介紹完了什么是websocket，下面介紹下如何實現websocket。

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

1、我們先新建一個websocket.js文件

// 創建websocket服務
const port = "8888"
const ws = require('nodejs-websocket');
const web_server = ws.createServer(function (conn) {
  conn.on('text', function (text) {
    console.log("發送的消息",text);
    conn.sendText(`發送成功了,發送的消息為：${text}`)
  });
  conn.on('close', function (code, reason) {
    console.log('關閉連接');
  });
  conn.on('error', function (code, reason) {
    console.log('異常關閉');
  });
}).listen(port);
exports.web_server = web_server

2、在app.js里面進行引入

const websocket = require("./websocket")

3、最后啟動服務

node app

二、然后是客戶端代碼

① 在vue中使用

1、我們先在utils下新建一個websocket.js文件

let webSocket = null;
let socketOpen = false;

// 發送消息
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("連接關閉！");
    };
  }
}

2、頁面引入文件

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

3、具體使用實例

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

② 在uniapp中使用

1、我們先在utils文件夾下新建一個websocket.js文件

let socketOpen = false;
// 發送消息
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;
    });
    // 關閉連接
    uni.onSocketClose(function(res) {
        console.log('WebSocket 已關閉！');
    });
    // 接受消息
    uni.onSocketMessage(function(res) {
        console.log('收到服務器內容：' + res.data);
    });
}

module.exports = {
    doSend,
    websocketInit
}

2、頁面引入文件

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

3、具體使用實例

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

以上就是關于“怎么優雅的使用WebSocket”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。