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
