序文この記事では、主に websocked を使用して長時間の接続を確立し、Vuex のグローバル通信特性と、watch 関数および computed 関数を使用してメッセージの変更を監視し、ページの変更を駆動してリアルタイム チャットを実現します。 1. 効果は図の通りです2. 具体的な実施手順1. Vuexの紹介コードは次のとおりです(例): //vuexをインストール npm インストール vuex //main.js に import store from './store' を導入します 新しいVue({ el: '#app', ルーター、 店、 レンダリング: h => h(App) }) 下の図に示すように、Vuex の簡単なカプセル化を作成しました。自分の習慣に従って進めてください。 2.webscoked実装Webscoked の実装は主に次の部分に分かれています。 接続を確立する ハートビートパケットの送信 失敗またはエラー後に再接続する 定数状態 = { URL: ''、 webSocket: null、 lockReconnect: false、 メッセージリスト: [], メッセージ項目: {}, ping間隔: null、 タイムアウト: null、 } const 変異 = { [types.INIT_WEBSOCKET](状態、データ) { state.webSocket = データ }, [types.LOCK_RE_CONNECT](状態、データ) { state.lockReconnect = データ }, [types.SET_PING_INTERVAL](状態、データ) { state.pingInterval = データ }, [types.SET_MSG_LIST](状態、データ) { state.messageList.push(データ) state.msgItem = データ }, } 定数アクション = { initWebSocket({ 状態、コミット、ディスパッチ、ルート状態 }) { 状態.webSocketの場合{ 戻る } 定数 realUrl = WSS_URL + rootState.doctorBasicInfo.token 定数 webSocket = 新しい WebSocket(realUrl) webSocket.onopen = () => { console.log('リンクを確立しました'); ディスパッチ('ハートチェック') } webSocket.onmessage = e => { console.log('メッセージを受信しました', e); 試す { if (typeof e.data === 'string' && e.data !== 'PONG') { res = JSON.parse(e.data) とします。 console.log('受信したコンテンツ', res); コミット('SET_MSG_LIST', res) } } キャッチ (エラー) {} } webSocket.onclose = () => { コンソールログ('閉じる'); ディスパッチ('再接続') } webSocket.onerror = () => { console.log('失敗'); ディスパッチ('再接続') } コミット('INIT_WEBSOCKET'、webSocket) }, // ハートビートパケット heartCheck({ state, commit }) { console.log(状態、'状態'); const { webSocket } = 状態 const pingInterval = setInterval(() => { webSocket.readyState === 1 の場合 { webSocket.send('PING') } }, 20000) コミット('SET_PING_INTERVAL', pingInterval) }, //再接続 reConnect({ state, commit, dispatch }) { (state.lockReconnect)の場合{ 戻る } コミット('INIT_WEBSOCKET', null) コミット('LOCK_RE_CONNECT', true) タイムアウトを設定する(() => { ディスパッチ('WebSocketを初期化') コミット('LOCK_RE_CONNECT', false) }, 20000) }, } const ゲッター = { webSocket: 状態 => state.webSocket、 メッセージリスト: 状態 => state.messageList、 メッセージアイテム: 状態 => 状態.メッセージアイテム、 } エクスポートデフォルト{ 名前空間: true、 州、 行動、 突然変異、 ゲッター } ページ取得 メソッド: { ...mapActions("webSocket", ["initWebSocket", "close"]), プッシュアイテム(アイテム) { const initMsg = 項目; this.msgList.push(initMsg); } } マウント() { このメソッドは、WebSocket を初期化します。 } 時計: メッセージアイテム: 関数 (アイテム) { this.pushItem(アイテム); } }, 計算: { ...mapGetters("webSocket", ["messageList", "msgItem"]), }, インターフェース <li v-for="(item, i) in msgList" :key="i" class="msgBox"></li> Webscoked実装のアイデアの説明 1. まずアクションで ws リンクを作成します。 2. ウォッチ属性を使用して、ページ上の状態における対応するメッセージの変化を監視します。新しいメッセージが受信されると、ページに表示されるメッセージ リストを変更し、双方向バインディングを使用してページの自動更新を実現します。 3. メッセージを送信するときに、バックエンドインターフェースを呼び出して、ページに表示されるメッセージリストに新しいメッセージを挿入します。 4. ws は一度確立すると簡単に切断されない長いリンクであるため、バックエンドからプッシュされたメッセージを受信し、メッセージ コンテンツがあるかどうかを判断すれば、メッセージ コンテンツがある場合は、状態のメッセージ リストを変更するだけで、ウォッチ属性に応じてページが自動的に更新され、インスタント メッセージング機能が完璧に実現されます。 要約するこれで、websocket+Vuex を使用したリアルタイム チャット ソフトウェアの実装に関するこの記事は終了です。より関連性の高い websocket+Vuex リアルタイム チャット コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: MySQLクエリ速度が遅く、パフォーマンスが低下する原因と解決策
UI デザインにおける多くの概念は言葉で言えば似ているように見えるかもしれませんが、実際には大きく異...
HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...
目次Docker Composeとは要件に不適切な言語が使用されている実装Docker Compos...
目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...
みなさんこんにちは。今日は Linux コマンド クエリ アプレットでの WePY クラウド開発の実...
目次序文仮想リストとは何ですか?デモ効果準備スクリーンの高さとボックスの高さ最適化要約する序文人気の...
序文: MySQL 8.0 では高速な列追加がサポートされ、数秒で大きなテーブルにフィールドを追加で...
目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...
この記事の例では、要素のマウスドラッグ効果を実現するためのvue+tsの具体的なコードを参考までに共...
DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...
学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...
今日、MySQL の無料インストール版をデプロイしたところ、テーブル 'mysql.plug...
目次MySQLデータベースの名前を変更する方法最初の方法: データベースの名前を変更することは非推奨...
目次1. 大文字と小文字の区別を決定するパラメータ2. パラメータ変更に関する注意事項要約: 1. ...
背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...