前書き: 最近の要件は、フロントエンドがグローバルアラームポップアップウィンドウを実装する必要があるということです。ajax を使用して http インターフェイスをリクエストする場合、タイマーを使用してアラームがあるかどうかをリクエストすることしかできません。これはリソースを消費するため、次のことはできません。アラーム情報をリアルタイムに監視します。したがって、現時点では、WebSocket を使用して通信を実現できます。WebSocket は 1 回のリクエストと 1 回の応答を必要とせず、サーバーがアクティブに送信することを実現できます。

ウェブソケット：

WebSocket は HTML5 の新しいプロトコルです (WebSocket プロトコルは本質的には TCP ベースのプロトコルです)
ブラウザとサーバー間の全二重通信を実現し、サーバーのリソースと帯域幅をより効果的に節約し、リアルタイム通信の目的を達成します。
Websocket は永続的なプロトコルです

WebSocketが提供するAPI：

// 连接成功后的回调函数
ws.onopen = function (params) {
  console.log('客户端连接成功')
  // 向服务器发送消息
  ws.send('hello')
};

// 从服务器接受到信息时的回调函数
ws.onmessage = function (e) {
  console.log('收到服务器响应', e.data)
};

// 连接关闭后的回调函数
ws.onclose = function(evt) {
  console.log("关闭客户端连接");
};

// 连接失败后的回调函数
ws.onerror = function (evt) {
  console.log("连接失败了");
};


// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，这样服务端会抛异常。
window.onbeforeunload = function() {
    ws.close();
}

次に、vue2 プロジェクトで WebSocket を使用するプロセスを示します。

1. まず、WebSocket メソッドへの直接呼び出しを容易にする WebSocket ツールを作成します。

websocket.js コード:

/**
 * websocket创建
 */

export function websocket() {
  return new Promise((res, req) => {
    if ('WebSocket' in window) {
      const ws = new WebSocket(`${'wss://'+ document.location.host+'/ws/notify_warning/'}`)
//这里用的document.location.host取url地址，在调试时也可以先写死，wss还是ws需要和后端同事确认
      res(ws)
    } else {
      req('您的浏览器不支持 WebSocket!')
    }
  })
}

2. データを管理するステートマシンを作成し、バックエンドからのデータを state.message に保存します。

import { websocket } from '@/utils/websocket'
import store from './../index'
import { getToken } from '@/utils/auth' // get token from cookie

const state = {
  message: {},
  ws: null
}

const mutations = {
  SET_MESSAGE: (state, message) => {
    state.message = message
  },
  SET_WS: (state, ws) => {
    state.ws = ws
  }
}

const actions = {
  websocketMsg({ commit }) {
    return new Promise((resolve, reject) => {
      websocket().then((ws) => {
        commit('SET_WS', ws)
        ws.onopen = function() {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send('发送数据')
        }

        ws.onmessage = function(evt) {
          var received_msg = evt.data
          commit('SET_MESSAGE', received_msg)
        }
        ws.onerror = function(error) {
          reject(error)
        }
        ws.onclose = function() {
          // 关闭 websocket
          // alert("连接已关闭...");
          if (getToken()) {
            store.dispatch('message/websocketMsg')
          }
        }
        resolve()
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3. 適切な場所に電話してください。

 try {
          await store.dispatch("message/websocketMsg");
        } 
catch (err) {}

このようにして、WebSocket によって渡された値はメッセージに保存され、ページ上に表示できます。

WebSocket通信のフロントエンド実装説明（vue2フレームワーク）

ウェブソケット：

次に、vue2 プロジェクトで WebSocket を使用するプロセスを示します。

おすすめ