Nuxt.js + SockJs 实现 webSocket 订单实时消息 语音播报，实时订单

Nuxt.js + SockJs 实现 webSocket 订单实时消息 语音播报，实时订单

随着项目的模块化，需要把websocket相关的功能独自创建一个模块进行引入使用

1，在plugins新建sockjs.js文件，项目要求是所有页面下都可以实时通信，所以在nuxt.config.js全局引入了

 

 

2，在sockjs.js文件中写入相关的代码

npm install sockjs-client
npm install stompjs

代码贴上：

import SockJS from 'sockjs-client'
import Stomp from 'stompjs'

import { getUser } from '../mixins'
import { Notification } from 'element-ui'

export const strict = true

export async function connectionSocket () {
  let _self = window.$nuxt // 获取vue实例
  let userInfo = await getUser() // 获取药店信息
  let socket = new SockJS('http://xxxxxxxxxxxxx/orderWebSocket')
  let stompClient = Stomp.over(socket)
  let headers = {
    pharmacyId: userInfo.shopId
  }
  stompClient.connect(headers, () => {
    stompClient.subscribe('/user/topic/orderNotice', (msg) => {
      console.log(JSON.parse(msg.body))
      // 语音播报 mp3地址必须写绝对地址
      new Audio('http://xxxxxxxxxxxxxxxxxx/tips.mp3').play()
      let orderMsg = JSON.parse(msg.body).responseMessage
      let orderId = JSON.parse(msg.body).orderNoticeDTO.orderId
      const h = _self.$createElement
      let dialogArr = []
      dialogArr.push(Notification({
        message: h('p', null, [
          h('span', null, orderMsg),
          h('a', {
            on: {
              click: () => {
                _self.$router.push({
                  path: '/transaction/order/detail',
                  query: {
                    id: orderId
                  }
                }) // 详情跳转
                for (let i = 0; i < dialogArr.length; i++) {
                  dialogArr[i].close() // 关闭当前
                }
              }
            }
          }, ' 点击查看')
        ]),
        position: 'bottom-right',
        type: 'info',
        duration: 0
      })
      )
    }, headers)
  }, (err) => {
    console.log('失败')
    console.log(err)
  })
}

 

3，在页面需要初始化的地方因为该js文件即可

import { connectionSocket } from '../plugins/sockjs'  // 引入

connectionSocket()  // 使用

文章最后发布于: 2019-10-26 10:42:04