{"id":644,"date":"2022-05-27T16:07:29","date_gmt":"2022-05-27T08:07:29","guid":{"rendered":"https:\/\/usei.cn\/?p=644"},"modified":"2022-05-27T17:18:17","modified_gmt":"2022-05-27T09:18:17","slug":"vue-websocket-%e7%a4%ba%e4%be%8b","status":"publish","type":"post","link":"https:\/\/usei.cn\/index.php\/2022\/05\/27\/vue-websocket-%e7%a4%ba%e4%be%8b\/","title":{"rendered":"VUE WebSocket \u793a\u4f8b"},"content":{"rendered":"\n<p>\u7ba1\u7406WS \u8fde\u63a5\u53ca\u91cd\u8fde\u7b49\u4fe1\u606f\uff0c\u6b64\u6587\u4ef6\u65e0\u9700\u4fee\u6539\uff0c\u53ef\u590d\u7528<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import Handler from '@\/utils\/websocketHandler'\r\n\/*\r\nSocket.readyState\r\n0 CONNECTING  \u8fde\u63a5\u5c1a\u672a\u5efa\u7acb\r\n1 OPEN        WebSocket\u7684\u94fe\u63a5\u5df2\u7ecf\u5efa\u7acb\r\n2 CLOSING     \u8fde\u63a5\u6b63\u5728\u5173\u95ed\r\n3 CLOSED      \u8fde\u63a5\u5df2\u7ecf\u5173\u95ed\u6216\u4e0d\u53ef\u7528\r\n*\/\r\nlet Socket = null\r\nlet timer = null \/\/ \u5b9a\u65f6\u91cd\u8fde\r\nlet ws_url = ''\r\nlet autoReconnect = true \/\/ \u5b9a\u65f6\u91cd\u8fde\r\n\r\n\/\/* ********************************************************************** \u4ee5\u4e0b\u5185\u5bb9\u53ef\u590d\u7528 ******************\/\r\n\/**\r\n * \u521d\u59cb\u5316 \u542f\u52a8WS\r\n * @param {*} url ws\u5730\u5740\r\n * @returns\r\n *\/\r\nconst Start = (url) => {\r\n  \/\/ \u521d\u59cb\u5316\r\n  if (typeof WebSocket === 'undefined') { return console.log('\u60a8\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301websocket') }\r\n  Socket &amp;&amp; Socket.close()\r\n\r\n  console.log('\u5efa\u7acbwebsocket\u8fde\u63a5:' + url)\r\n  ws_url = url\r\n  Socket = new WebSocket(url)\r\n  Socket.onopen = onOpenWS\r\n  Socket.onmessage = onMessageWS\r\n  Socket.onerror = onErrorWS\r\n  Socket.onclose = onCloseWS\r\n}\r\n\/**\r\n * \u624b\u52a8\u5173\u95edws(\u4e0d\u4f1a\u89e6\u53d1\u91cd\u8fde)\r\n *\/\r\nconst Close = () => {\r\n  console.info('ws \u4e3b\u52a8\u5173\u95ed')\r\n  timer &amp;&amp; clearInterval(timer)\r\n  autoReconnect = false\r\n  Socket &amp;&amp; Socket.close()\r\n  autoReconnect = true\r\n}\r\n\/**\r\n * \u624b\u52a8\u91cd\u8fde\r\n *\/\r\nconst Reconnect = () => {\r\n  Socket = null\r\n  autoReconnect = false \/\/ \u6682\u65f6\u5173\u95ed\u81ea\u52a8\u91cd\u8fde\r\n  Start(ws_url)\r\n  autoReconnect = true\r\n}\r\n\/**\r\n * \u8fde\u63a5\u6210\u529f\r\n *\/\r\nconst onOpenWS = () => {\r\n  console.log('WS-onOpenWS \u6253\u5f00')\r\n  Handler.StateChange(1)\r\n  clearInterval(timer)\r\n  \/\/ \u53d1\u9001\u6ce8\u518c\u4fe1\u606f\r\n  let data = Handler.GetRegisterInfo()\r\n  SendMessage(data)\r\n}\r\n\/**\r\n * \u8fde\u63a5\u5931\u8d25\u91cd\u8fde\r\n * @param {*} e \u9519\u8bef\u4fe1\u606f\r\n *\/\r\nconst onErrorWS = (e) => {\r\n  Socket.close()\r\n  console.log('WS-onErrorWS \u9519\u8bef', e)\r\n  Handler.StateChange(2)\r\n  if (Socket.readyState !== 3) {\r\n    Reconnect()\r\n  }\r\n}\r\n\/**\r\n * \u88ab\u52a8\u5173\u95ed WS\r\n *\/\r\nconst onCloseWS = () => {\r\n  console.log('WS-onCloseWS \u88ab\u52a8\u5173\u95ed')\r\n  Handler.StateChange(0)\r\n  \/\/ \u91cd\u8fde\r\n  if (autoReconnect) {\r\n    timer &amp;&amp; clearInterval(timer)\r\n    timer = setTimeout(() => {\r\n      Reconnect()\r\n    }, 2000)\r\n  }\r\n}\r\n\r\n\/**\r\n * \u63a5\u6536\u6570\u636e\r\n * @param {*} e \u9519\u8bef\u4fe1\u606f\r\n *\/\r\nconst onMessageWS = e => {\r\n  console.log('WS-onMessageWS \u63a5\u6536\u6d88\u606f', e)\r\n  let data = e.data\r\n  try {\r\n    data = JSON.parse(e.data)\r\n  } catch (e) {\r\n    data = e.data\r\n  }\r\n  Handler.MessageHandler(data) \/\/ \u4ea4\u7ed9 MessageHandler\r\n}\r\n\/**\r\n * \u53d1\u9001\u6570\u636e\r\n * @param {*} message \u53d1\u9001\u5185\u5bb9\r\n *\/\r\nconst SendMessage = message => {\r\n  console.log('WS-sendMessage \u53d1\u9001\u6d88\u606f', message)\r\n  Socket.send(JSON.stringify(message))\r\n}\r\n\r\nexport default{\r\n  Start,\r\n  Close,\r\n  Reconnect,\r\n  SendMessage\r\n}\r\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u4fe1\u606f\u5904\u7406\u5668<\/h2>\n\n\n\n<p>\u6bcf\u4e2a\u9879\u76ee\u6839\u636e\u4e1a\u52a1\u4e0d\u540c\u5355\u72ec\u5904\u7406<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import store from '@\/store'\n\/**\n *  \u6d88\u606f\u5904\u7406\u51fd\u6570\n * @param {*} message\n *\/\nconst MessageHandler = (message) =&gt; {\n  console.info('MessageHandler', message)\n  if (message&#91;'type'] === 'getWait') {\n    store.dispatch('register\/loadList')\n  }\n  if (message&#91;'type'] === 'getdepa') {\n    store.dispatch('register\/loadList')\n  }\n}\n\/**\n * \u53d1\u9001\u6ce8\u518c\u4fe1\u606f\n *\/\nconst GetRegisterInfo = () =&gt; {\n  const data = {\n    type: 'register',\n    source: store.state.register.uid.source,\n    data: {\n      uid: store.state.register.uid.uid\n    }\n  }\n  return data\n}\n\/**\n * ws \u72b6\u6001\u53d8\u5316\n *\/\nconst StateChange = (state) =&gt; {\n  store.commit('register\/SET_WS_STATE', state)\n}\nexport default{\n  GetRegisterInfo,\n  MessageHandler,\n  StateChange\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u5168\u5c40\u5f15\u5165<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>import WS from '@\/utils\/websocket'\nVue.prototype.$WS = WS\n\/\/ \u9875\u9762\u542f\u52a8\nthis.$WS.start('ws:192.168.0.1:2346')\n\/\/ \u53d1\u9001\u5185\u5bb9\nthis.$WS.SendMessage({'type':''})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u7ba1\u7406WS \u8fde\u63a5\u53ca\u91cd\u8fde\u7b49\u4fe1\u606f\uff0c\u6b64\u6587\u4ef6\u65e0\u9700\u4fee\u6539\uff0c\u53ef\u590d\u7528 \u4fe1\u606f\u5904\u7406\u5668 \u6bcf\u4e2a\u9879\u76ee\u6839\u636e\u4e1a\u52a1\u4e0d\u540c\u5355\u72ec\u5904\u7406 \u5168\u5c40\u5f15\u5165<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-644","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":9,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/644\/revisions"}],"predecessor-version":[{"id":656,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/posts\/644\/revisions\/656"}],"wp:attachment":[{"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}