如何使用Vue3+Node打造属于你的WebSocket即时通讯聊天室

2024-01-16 09:26:35

WebSocket是什么？

WebSocket是一种双向通信协议，允许客户端和服务器在单个TCP连接上进行全双工通信。这意味着客户端和服务器可以同时发送和接收消息，而无需等待对方完成发送。

WebSocket比HTTP协议更有效，因为它只需要建立一个TCP连接，而HTTP协议需要为每个请求建立一个新的TCP连接。此外，WebSocket协议是二进制协议，而HTTP协议是文本协议，因此WebSocket协议的开销更小。

如何使用Vue3和Node.js构建WebSocket即时通讯聊天室？

1. 创建Vue3项目

首先，我们需要创建一个Vue3项目。我们可以使用Vue CLI工具来创建一个新的Vue3项目。

vue create my-chat-app

2. 安装依赖项

接下来，我们需要安装必要的依赖项。

npm install vue-socket.io --save
npm install socket.io --save

3. 配置Vue3项目

接下来，我们需要在Vue3项目中配置WebSocket。

在main.js文件中，我们需要添加以下代码：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import socketio from 'socket.io-client'

Vue.use(VueSocketIO, socketio('localhost:3000'))

4. 创建聊天室组件

接下来，我们需要创建一个聊天室组件。

<template>
  <div>
    <ul>
      <li v-for="message in messages">
        {{ message }}
      </li>
    </ul>
    <input type="text" v-model="newMessage">
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      this.$socket.emit('message', this.newMessage)
      this.newMessage = ''
    }
  },
  mounted() {
    this.$socket.on('message', (message) => {
      this.messages.push(message)
    })
  }
}
</script>

5. 创建Node.js服务器

接下来，我们需要创建一个Node.js服务器。

const express = require('express')
const socketIO = require('socket.io')

const app = express()
const server = app.listen(3000)
const io = socketIO(server)

io.on('connection', (socket) => {
  socket.on('message', (message) => {
    io.emit('message', message)
  })
})