websocket 使用记录

在main.js中 创建websocket连接 (webSocket.js文件在最后)

import webSocket from '@/assets/js/webSocket.js'

Vue.prototype.$webSocket = webSocket
webSocket.initWebSocket()

vuex中储存websocket推送的消息(使用vuex可以在项目任务地方获取socket消息)

const state = {
  socketRes: {}, /* socket消息结果 */
}

const getters = {
  socketRes (state) {
    return state.socketRes
  }
}

const mutations = {
  GET_WEB_SOCKET (state,res) {
    state.socketRes = res
  }
}

const actions = {
  GET_WEB_SOCKET (context, GET_WEB_SOCKET) {
    context.commit('GET_WEB_SOCKET', GET_WEB_SOCKET)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

vue文件中获取websocket消息

computed: {
  /* socket消息 */
  socketRes: {
    get () {
      return this.$store.getters.socketRes
    },
    set (val) {
      this.$store.dispatch('GET_WEB_SOCKET', val)
    }
  }
},
watch: { 
  /* socket消息 */
  socketRes: {
    handler (res) {
      console.log(res)
    },
    deep: true,
    immediate: true
  }
}

websocket 配置js文件

import store from '@/store/index';
import {requestUrl} from '@/assets/js/uploadUrl.js'
import CryptoJS from 'crypto-js'
import {setNotice} from '@/assets/js/tool.js'

var webSocket = null

// 初始化webSocket
function initWebSocket() {

  let object = {
		time: (new Date()).getTime()
  }
  let url = requestUrl.socketUrl + '?datas=' + btoa(aesMinEncrypt(JSON.stringify(object)));

	if(WebSocket !== 'undefined') {
		// 创建socket对象并连接后台
		// 有些后台会要求发送socket请求 建立连接 使用send方法连接即可
		if ('WebSocket' in window) {
			webSocket = new WebSocket(url)
		} else if ('MozWebSocket' in window) {
			webSocket = new MozWebSocket(url)
		} else {
			alert('您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！')
		}

	}else {
		alert("您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！");
	}
	// 连接成功调用
	webSocket.onopen = function() { 
		ws_open();
	}

	// 接收信息方法
	webSocket.onmessage = function(data) {
		ws_message(data);
	}

	// 关闭方法
	webSocket.onclose = function() {
		console.log('WebSocket连接已关闭')
		ws_close();
	}

	// 连接错误回调
	webSocket.onerror = function() {
		console.log("WebSocket连接发生错误");
		ws_error()
	}
}

/* 重连 */
function reconnect () {
	// initWebSocket()
}

// 加密函数
function aesMinEncrypt(word){
  var _word = CryptoJS.enc.Utf8.parse(word),
    _key = CryptoJS.enc.Utf8.parse("3g-,1~lde^[w`S&5"),
    _iv = CryptoJS.enc.Utf8.parse("%JL<&*l.FsS?:}#1");
  var encrypted = CryptoJS.AES.encrypt(_word, _key, {
    iv: _iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}


// 连接成功方法
function ws_open() {
	console.log("WebSocket连接成功！")

	let user = JSON.parse(sessionStorage.getItem('user'))
	
	if (!user) return
	/* 每次连接成功后 请求socket */
	let objects = {
		userId: user.id,
		systemType: setNotice,
		type: 'msg',
	}
	setTimeout(() => {
		sendMsg(objects,()=>{})
	}, 2000)
}

// 接收服务端消息
function ws_message(res) {
	if(!res)  return;
	store.commit('GET_WEB_SOCKET', JSON.parse(res.data))
}
//发送数据
function webSocketSend(data) {
  webSocket.send(JSON.stringify(data));
}

// 连接关闭
function ws_close() {
	reconnect()
}
/* 连接错误 */
function ws_error () {
	reconnect()
}

// 发送
function sendMsg(data) {
	switch (webSocket.readyState) {
		//CONNECTING：值为0，表示正在连接。
		case webSocket.CONNECTING:
			setTimeout(function() {
				webSocketSend(data);
			}, 1000);
			break;
		//OPEN：值为1，表示连接成功，可以通信了。
		case webSocket.OPEN:
			webSocketSend(data);
			break;
		//CLOSING：值为2，表示连接正在关闭。
		case webSocket.CLOSING:
			setTimeout(function() {
				webSocketSend(data);
			}, 1000);
			break;
		//CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
		case webSocket.CLOSED:
			// do something
			break;
		default:
			// this never happens
			break;
	}
}
export default {
  initWebSocket,
  ws_close,
  sendMsg,
  webSocket
};