vue websocket 简单版没有心跳机制

原创已于 2022-09-27 16:47:32 修改 · 321 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #socket #websocket

于 2020-12-04 11:21:20 首次发布

本文介绍了一个使用WebSocket进行实时通信的应用实例，包括如何建立连接、发送用户ID到服务器及接收服务器消息的处理方法。此外还提供了包含心跳机制的进阶版实现链接。

组件：

import { websocketIp } from '../../config'

let ws = null

// 连接socket
function openWebsocket() {
  ws = new WebSocket(websocketIp) // ws://192.168.10.65:58890/webSocket
  ws.onopen = () => {
    if (ws.readyState === 1) {
      ws.send(
        JSON.stringify({
          // 连接成功将，用户ID传给服务端
          uid: JSON.parse(sessionStorage.getItem('userInfo')).id
        })
      )
    }
  }
  ws.onerror = err => {
    console.log('websocket error:', err)
    alert('websocket连接失败，建议退出重新登录')
  }
  return ws
}

export function getSocket1() {
  return new Promise((resolve, reject) => {
    if (!ws || ws.readyState !== 1) {
      openWebsocket()
    }
    resolve(ws)
  })
}

// 断开socket
export function closeSocket1() {
  if (ws) {
    ws.close()
    ws.onclose = function () {
      console.log('Socket关闭了')
    }
  }
}

export function getCarHireMsg1(fun) {
  return getSocket1().then((socket) => {
    socket.onmessage = msgEvent => {
      console.log(msgEvent)
      fun(msgEvent)
    }
  })
}

页面引用：

import { getCarHireMsg } from '@/socket/index'

created () {
  getCarHireMsg(this.getSock)
}

// 连接socket
getSock(data) {
      if (data.data !== '服务器连接成功！') {
        this.handleWebSocket(data.data)
      }
    },
// 处理socket 信息
handleWebSocket(content) {
  console.log(JSON.parse(content))
}