下载websocket插件
npm install websocket
基础步骤
<template>
<div class="hello">
<input type="text" v-model="sendContent">
<button @click="sendMessage">发送</button>
<div>
<div v-for="(item, index) in messages" :key="index">
<div>名字：{{ item.username }}</div>
<div>消息:{{ item.content }}</div>
<hr>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
socket: null,
messages: [],
sendContent: ""
}
},
created() {
// 创建 WebSocket 连接
this.socket = new WebSocket('ws://8.222.189.229:3000');
// 监听 WebSocket 连接事件
this.socket.addEventListener('open', event => {
console.log('WebSocket 连接已建立', event);
});
// 监听 WebSocket 接收消息事件
this.socket.addEventListener('message', event => {
const message = JSON.parse(event.data);
this.messages.push(JSON.parse(message))
console.log(this.messages)
});
},
methods: {
sendMessage() {
const message = {
username: '小白',
content: this.sendContent
};
this.socket.send(JSON.stringify(message));
this.messages.push({ ...message })
this.sendContent = ""
}
}
}
</script>
