快捷導(dǎo)航

websocket實現(xiàn)Vue?3和Node.js之間的實時消息推送

更新時間：2024年06月01日 09:35:19 作者：牛掰666

使用?WebSocket?實現(xiàn)實時消息推送是一種高效的方式,可以在客戶端和服務(wù)器之間建立長連接,實現(xiàn)低延遲的雙向通信,以下是一個簡單的示例,展示如何在前端使用?Vue?3?和后端使用?Node.js?搭建一個?WebSocket?實現(xiàn)實時消息推送的應(yīng)用

使用 WebSocket 實現(xiàn)實時消息推送是一種高效的方式，可以在客戶端和服務(wù)器之間建立長連接，實現(xiàn)低延遲的雙向通信。以下是一個簡單的示例，展示如何在前端使用 Vue 3 和后端使用 Node.js 搭建一個 WebSocket 實現(xiàn)實時消息推送的應(yīng)用。

前端（Vue 3）

1. 創(chuàng)建 Vue 項目

首先，創(chuàng)建一個新的 Vue 3 項目。如果你還沒有安裝 Vue CLI，可以通過以下命令安裝：

npm install -g @vue/cli

創(chuàng)建一個新的 Vue 項目：

vue create websocket-demo
cd websocket-demo

2. 安裝 WebSocket 客戶端庫

在 Vue 項目中，可以使用原生 WebSocket API，也可以使用第三方庫。這里我們使用原生 WebSocket API。

3. 實現(xiàn) WebSocket 客戶端

在 src 目錄下的 App.vue 文件中，添加以下代碼：

<template>
  <div id="app">
    <h1>WebSocket Demo</h1>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message" />
    <button @click="sendMessage">Send</button>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
      messages: []
    };
  },
  mounted() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://localhost:3000');
      this.ws.onmessage = (event) => {
        this.messages.push(event.data);
      };
      this.ws.onopen = () => {
        console.log('Connected to WebSocket server');
      };
      this.ws.onclose = () => {
        console.log('Disconnected from WebSocket server');
      };
    },
    sendMessage() {
      if (this.message !== '') {
        this.ws.send(this.message);
        this.message = '';
      }
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

后端（Node.js）

1. 創(chuàng)建 Node.js 項目

創(chuàng)建一個新的目錄并初始化一個 Node.js 項目：

mkdir websocket-server
cd websocket-server
npm init -y

2. 安裝 WebSocket 庫

安裝 ws 庫，這是一個簡單且強大的 WebSocket 庫：

npm install ws

3. 實現(xiàn) WebSocket 服務(wù)器

在項目根目錄下創(chuàng)建一個 server.js 文件，添加以下代碼：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (ws) => {
  console.log('Client connected');
  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
    // Broadcast the message to all clients
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});
console.log('WebSocket server is running on ws://localhost:3000');