# **websocket**
## **后端**
#### **依賴**
```
npm install ws --save
```
#### **代碼示例**
創建websocket文件夾，創建test.js測試文件
```
//創建一個WebSocket服務器，在10000端口啟動
const WebSocket = require("ws");
const server = new WebSocket.Server({ port: 10000, path: "/ws" });
server.on("connection", (ws) => {
console.log("Client connected");// 鏈接成功
ws.on("message", (message) => {
console.log(`Received message: ${message}`);//接收前端發來的消息
});
let data = 0;
setInterval(() => {
if (data == 100) {
data = 0;
}
ws.send(`The current time is ${new Date().toLocaleTimeString()}`);//給前端發送消息
data++;
}, 1000);
ws.on("close", () => {
console.log("Client disconnected");// 監聽關閉后回調
});
});
```
#### **使用**
在bin/www里面插入`require("../websockets/test");`代碼，調用websocket
## **前端**
#### **代碼實例**
```
<template>
<div>
<span>{{ dataMessage }}</span>
<input type="text" v-model="message" />
<div v-if="socket?.readyState === OPEN">
<el-button type="primary" size="default" @click="sendMessage">
發送
</el-button>
<el-button size="default" @click="closeSocket">關閉</el-button>
</div>
<div v-else>
<el-button size="default" @click="connection">鏈接</el-button>
</div>
</div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import { ref, onUnmounted, onMounted } from "vue";
const OPEN = WebSocket.OPEN;
const socket = ref(null);
const dataMessage = ref("");
const message = ref("");
const sendMessage = () => {
socket.value.send(message.value);
};
const closeSocket = () => {
socket.value.close();
socket.value = null;
dataMessage.value = "";
ElMessage.success("連接已關閉");
};
const connection = () => {
socket.value = new WebSocket("/socket/ws");
socket.value.onopen = () => {
ElMessage.success("連接成功");
};
socket.value.onmessage = (event) => {
// console.log(event.data);
dataMessage.value = event.data;
};
};
onMounted(() => {
connection();
});
onUnmounted(() => {
closeSocket();
});
</script>
<style lang="scss" scoped></style>
```
