Vue下WebSocket群聊功能搭建指南

前端

2023-11-15 09:34:39

在Vue.js项目中使用WebSocket时，需要考虑模块化、组件之间的访问等问题。本文将分享Vue-native-websocket库的使用和配置，并以群聊功能为例，展示如何使用该库实现实时通信。

一、WebSocket介绍

WebSocket是一种双向通信协议，允许客户端与服务器之间进行全双工通信。它可以保持连接，以便服务器可以随时向客户端发送数据。WebSocket适用于需要实时数据传输的应用场景，例如聊天、游戏、股票行情等。

二、Vue-native-websocket库介绍

Vue-native-websocket是一个Vue.js库，用于简化WebSocket的集成。它提供了简单易用的API，可以轻松地连接和使用WebSocket。该库还支持多种功能，例如自动重连、心跳检测等。

三、搭建群聊功能

安装依赖

npm install vue-native-websocket --save

创建WebSocket组件

// WebSocket.vue
<template>
  <div>
    <input type="text" v-model="message" @keyup.enter="sendMessage">
    <ul>
      <li v-for="msg in messages">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
import Vue from 'vue'
import VueNativeWebSocket from 'vue-native-websocket'

Vue.use(VueNativeWebSocket, 'ws://localhost:8080')

export default {
  data() {
    return {
      message: '',
      messages: []
    }
  },
  methods: {
    sendMessage() {
      this.$webSocket.send(this.message)
      this.message = ''
    }
  },
  created() {
    this.$webSocket.on('message', (msg) => {
      this.messages.push(msg.data)
    })
  }
}
</script>

在主组件中使用WebSocket组件

<template>
  <div>
    <WebSocket />
  </div>
</template>

<script>
import WebSocket from './WebSocket.vue'

export default {
  components: {
    WebSocket
  }
}
</script>

在服务器端配置WebSocket

// app.js
const express = require('express')
const WebSocket = require('ws')

const app = express()

const server = app.listen(8080)

const wss = new WebSocket.Server({ server })

wss.on('connection', (ws) => {
  ws.on('message', (msg) => {
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(msg)
      }
    })
  })
})