IM串socket

tags: Tag(change me!)

安裝

下

npm i socket.io socket.io-client

npm i vue-native-websocket vue-socket.io

---

引用

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'bootstrap'; // Import js file
import 'bootstrap/dist/css/bootstrap.min.css'; // Import css file
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueSocketIO from 'vue-socket.io'
import websocket from 'vue-native-websocket'
import Media from 'vue-media'
import $ from 'jquery';
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
Vue.prototype.$axios = axios;
Vue.use(VueAxios, axios)
Vue.config.productionTip = false

Vue.use(websocket, 'wss://itriptaiwan.megatime.com.tw/string/SocketHandler/AppHandler.ashx', { 
    reconnection: true,
    reconnectionAttempts: 5,
    reconnectionDelay: 3000,
})

new Vue({
    router,
    store,
    $,
    VueSocketIO,
    render: h => h(App)
}).$mount('#app')

---

使用

在mounted()生命週期裡打

    let websocket = new WebSocket(
      "wss://itriptaiwan.megatime.com.tw/string/SocketHandler/AppHandler.ashx"
    );
    websocket.onopen = function(evt) {
      onOpen(evt);
    };
    websocket.onclose = function(evt) {
      onClose(evt);
    };
    websocket.onmessage = function(evt) {
      onMessage(evt);
    };
    websocket.onerror = function(evt) {
      onError(evt);
    };
    // 完成連線
    function onOpen(evt) {
      var status = "connected";
      console.log("ws::open : connection established " + status, evt);
      writeToScreen("CONNECTED");
      var inArg = {
        Account: ToPhone,
        Guid: Guid,
        AppId: "StringDemo_Web"
      };

      doSend(buildRequest("ValidGuid", inArg));
    }
    // 建立 request 字串
    function buildRequest(methodName, inArg) {
      var inPack = {
        Method: methodName,
        Request: JSON.stringify(inArg)
      };
      return JSON.stringify(inPack);
    }

    // 關閉連線
    function onClose(evt) {
      writeToScreen("DISCONNECTED");
      console.log(evt);
    }
    // 接收到訊息
    function onMessage(evt) {
      //當自己在聯絡人介面時，若有人傳訊息給你，則會顯示未讀標示
      var obj = JSON.parse(evt.data);
      if (obj && obj.Method == "NotifyInfo") {
        var objResult = JSON.parse(obj.Response);
        var con = document.getElementById(objResult.ViaAccount);
        if (con == null) {
          window.location.reload();
        } else if (objResult.Badge > 0) {
          //console.log(con)
          con.setAttribute("class", "circles");
        }
      }
    }
    // 發生錯誤
    function onError(evt) {
      writeToScreen("ERROR: " + evt.data);
    }
    // 傳送資料給 server
    function doSend(message) {
      websocket.send(message);
    }
    // 將資料顯示在畫面上
    function writeToScreen(msg) {
      console.log(msg);
    }