切換語言為:簡體

基於Socket.io-client Vue 3 中實現不同應用之間的實時通訊

  • 爱糖宝
  • 2024-10-18
  • 2050
  • 0
  • 0

Socket.IO-Client 使用教程

Socket.IO-Client 是一個實時應用程式框架的客戶端部分,它允許瀏覽器與伺服器之間進行實時、雙向的通訊。Socket.IO 使用 WebSocket 協議並提供回退選項,確保即使在舊版瀏覽器中也能正常工作。

步驟 1: 安裝 socket.io-client

npm install socket.io-client

步驟 2: 建立 Socket 連線

  <div>
    <h1>Socket.IO with Vue 3</h1>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="Type a message..." />
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { io } from 'socket.io-client';

export default {
  setup() {
    const socket = io('http://localhost:3000'); // 替換為你的 Socket.IO 伺服器地址
    const message = ref('');
    const messages = ref([]);

    const sendMessage = () => {
      if (message.value) {
        socket.emit('chat message', message.value);
        message.value = '';
      }
    };

    const receiveMessage = (msg) => {
      messages.value.push(msg);
    };

    onMounted(() => {
      socket.on('chat message', receiveMessage);
    });

    onBeforeUnmount(() => {
      socket.off('chat message', receiveMessage);
      socket.disconnect();
    });

    return {
      message,
      messages,
      sendMessage,
    };
  },
};
</script>

<style>
/* 新增一些樣式 */
</style>


步驟 3: 設定 Socket.IO 伺服器 server.js

1.建立專案資料夾: 

在你的工作目錄中建立一個新的資料夾,例如 socket-server

mkdir socket-server

cd socket-server

2.初始化 Node.js 專案: 

使用 npm 初始化一個新的 Node.js 專案:

npm init -y


這將建立一個package.json 檔案。

步驟 2: 安裝所需的依賴項

安裝

express 和 socket.io;

npm install express socket.io


在專案根目錄下建立一個名為 server.js 的檔案,並新增以下程式碼:

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();

const server = http.createServer(app);

const allowedOrigins = [
  "http://localhost:3000", //需要跨域的地址
];

const io = new Server(server, {
  cors: {
    origin: (origin, callback) => {
      if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
        callback(null, true); // 允許請求
      } else {
        callback(new Error('Not allowed by CORS')); // 拒絕請求
      }
    },
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

app.use(express.static('public'));

// 啟動伺服器
const PORT = 3000;
server.listen(PORT, () => {
  console.log(`listening on *:${PORT}`);
});


步驟 4: 執行伺服器

node server.js


會看到輸出:listening on *:3000

步驟 5: 測試 Socket.IO 伺服器

在專案根目錄下建立一個名為public的資料夾,並在其中建立一個 index.html檔案,內容如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Socket.IO Test</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        function sendMessage() {
            const message = document.getElementById('message').value;
            socket.emit('chat message', message);
            document.getElementById('message').value = '';
        }

        socket.on('chat message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            document.getElementById('messages').appendChild(item);
        });
    </script>
</head>
<body>
<ul id="messages"></ul>、
<input id="message" autocomplete="off" /><button onclick="sendMessage()">Send</button>
</body>
</html>


步驟 6: 訪問客戶端

開瀏覽器並訪問 http://localhost:3000。你應該會看到一個簡單的輸入框和傳送按鈕,這樣就可以實現不同終端的實時通訊了!

最後確保檔案結構正確

socket-server/

├── node_modules/

├── package.json

├── package-lock.json

├── public/

│ └── index.html

└── server.js

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.