下面是使用Vue和Node.js实现客服聊天窗口的步骤:
-
创建一个Vue项目:可以使用
vue-cli
来创建一个新的Vue项目。vue create chat-app
-
安装所需依赖:在命令行中进入到项目目录,并安装以下依赖。
npm install axios socket.io-client --save
-
创建前端页面:在src文件夹下创建一个名为Chat.vue的组件,用于显示聊天记录和发送消息。代码如下:
<template>
<div class="chat">
<div class="messages" ref="messages">
<div v-for="(message, index) in messages" :key="index">{{ message }}</div>
</div>
<form @submit.prevent="sendMessage">
<input type="text" v-model.trim="newMessage" placeholder="请输入消息内容"/>
<button type="submit">发送</button>
</form>
</div>
</template>
<script>
import io from 'socket.io-client';
import axios from 'axios';
export default {
name: 'Chat',
data() {
return {
messages: [],
newMessage: '',
socket: null,
};
},
mounted() {
// 连接Socket服务器
this.socket = io('http://localhost:3000');
// 监听服务端发来的消息事件,并将其添加到聊天记录中
this.socket.on('message', (data) => {
this.messages.push(data);
this.$nextTick(() => {
const el = this.$refs.messages;
el.scrollTop = el.scrollHeight;
});
});
},
methods: {
// 发送消息
sendMessage() {
if (this.newMessage.trim()) {
this.socket.emit('message', this.newMessage);
this.messages.push(`我:${this.newMessage}`);
this.newMessage = '';
}
},
},
};
</script>
- 创建Node.js服务器:在项目根目录下创建一个名为server.js的文件,用于启动Node.js服务器。代码如下:
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
io.on('connection', (socket) => {
console.log(`用户 ${socket.id} 已连接`);
// 监听客户端发来的消息事件,并将其广播给所有客户端
socket.on('message', (data) => {
console.log(`收到消息:${data}`);
io.emit('message', `客服:${data}`);
});
// 监听断开连接事件
socket.on('disconnect', () => {
console.log(`用户 ${socket.id} 已断开`);
});
});
http.listen(3000, () => {
console.log("服务已启动");
});
- 运行程序并测试聊天功能。
以上就是使用Vue和Node.js实现客服聊天窗口的步骤。希望对你有所帮助!