WebSocket 前端实时消息对接 （微信小程序、后台）

一、微信小程序

我这个是最简易版本的 ，具体消息需要什么格式及样式还需要自己添加（基础使用）

import config from '@/config'
const url = config.socketUrl + config.baseApi  // 后端告诉的地址 
// 一般格式为：ws://192.xxx.xx.xx/xxx

export function createWebSocket(id) {
	//建立websocket连接
	wx.connectSocket({
		//下面的url纯属假的，真实的需要自己去加
		url: url + '/websocket/' + id,
	})

	//连接成功
	wx.onSocketOpen(function() {
		wx.sendSocketMessage({
			data: 'stock',
		}) // 发送了一条消息
	})

	//连接失败
	wx.onSocketError(function() {
		console.log('websocket连接失败！');
	})
	//接收数据
	wx.onSocketMessage(function(data) {
		console.log(data.data);
		uni.showModal({
			content: data.data,
			showCancel: false
		}) // 收到消息显示出来

	})
}
export function closeWebSocket() {

	//断开连接
	wx.onSocketClose(function(res) {
		console.log('WebSocket 已关闭！')
	})
}
export default {
	createWebSocket,
	closeWebSocket
}

二、后台（pc端）

 js文件

const url = process.env.VUE_APP_SOCKET_URL +'/pasture-service/websocket/'
import { Notification} from 'element-ui' // 用了elementui 的消息提示
export function createWebSocket(id) {

    let websocket = null;
    //建立websocket连接
    if ('WebSocket' in window) {
        //连接WebSocket节点
        websocket = new WebSocket(url + id);
    } else {
        alert('浏览器不支持webSocket');
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        // setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function (event) {
        // setMessageInnerHTML("open");
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        let data = event.data;
        console.log("后端传递的数据:" + data);

        Notification.info({
            title: '您有一条新的消息',
            message: data
        })

        //将后端传递的数据渲染至页面
        // $("#online").html(data);
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
        // setMessageInnerHTML("close");
    };

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

}

export default {
    createWebSocket
}

使用：  先引用该js文件，再通过 createWebSocket(id)  去使用！