快捷導(dǎo)航

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

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

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

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

前端（Vue 3）

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

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

npm install -g @vue/cli

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

vue create websocket-demo
cd websocket-demo

2. 安裝 WebSocket 客戶端庫

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

3. 實(shí)現(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 項(xiàng)目

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

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

2. 安裝 WebSocket 庫

安裝 ws 庫，這是一個(gè)簡單且強(qiáng)大的 WebSocket 庫：

npm install ws

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

在項(xiàng)目根目錄下創(chuàng)建一個(gè) 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');

運(yùn)行項(xiàng)目

1. 啟動(dòng) WebSocket 服務(wù)器

在 websocket-server 目錄下，運(yùn)行以下命令啟動(dòng) WebSocket 服務(wù)器：

node server.js

2. 啟動(dòng) Vue 項(xiàng)目

在 websocket-demo 目錄下，運(yùn)行以下命令啟動(dòng) Vue 項(xiàng)目：

npm run serve

結(jié)果

打開瀏覽器，訪問 http://localhost:8080，你應(yīng)該會(huì)看到一個(gè)簡單的 WebSocket 演示應(yīng)用。你可以在輸入框中輸入消息并發(fā)送，消息會(huì)通過 WebSocket 服務(wù)器廣播給所有連接的客戶端，實(shí)時(shí)更新消息列表。

通過這種方式，你可以實(shí)現(xiàn)一個(gè)簡單的實(shí)時(shí)消息推送系統(tǒng)。當(dāng)然，這只是一個(gè)基本的示例，實(shí)際應(yīng)用中你可能需要處理更多的邏輯和安全問題。

到此這篇關(guān)于websocket實(shí)現(xiàn)Vue 3和Node.js之間的實(shí)時(shí)消息推送的文章就介紹到這了,更多相關(guān)Vue 3和Node.js的消息推送內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: