vue实现websocket客服聊天功能
本⽂章主要介绍如何实现⼀个基本的聊天，后续会添加表情包，传照⽚等功能
其实刚开始接触的时候，我最⼤的疑惑是聊天功能的前期是否需要搭建什么框架、下载⼀些什么东西之类的，结果就是，其实websocket可以直接使⽤，然后前后端搭配，也是免费的，暂时没发现需要收费功能的东西。
实现效果图：
⾸先封装⼀个websocket.js⽂件（⼤家可以直接复制，然后把接收/发送数据之类的格式改成⾃⼰的就可以啦）
import store from '@/store'
var webSocket = null;
var globalCallback = null;//定义外部接收数据的回调函数
//初始化websocket
export function initWebSocket (url) {
//判断浏览器是否⽀持websocket
if ("WebSocket" in window) {
webSocket = new WebSocket(url);//创建socket对象
} else {
alert("该浏览器不⽀持websocket!");
}
//打开
webSocketOpen();
};
/
/收信
webSocketOnMessage(msg);
};
//关闭
webSocketClose();
};
//连接发⽣错误的回调⽅法
console.log("WebSocket连接发⽣错误");
};
}
//连接socket建⽴时触发
export function webSocketOpen () {
console.log("WebSocket连接成功");
}
//客户端接收服务端数据时触发,e为接受的数据对象
export function webSocketOnMessage (e) {
// 存储在store中，然后在聊天界⾯中监控变化⾃动拿取收到的信息
storemit('user/SET_WS_MSG', e)
}
/
/发送数据
export function webSocketSend (data) {
console.log('发送数据');
//在这⾥根据⾃⼰的需要转换数据格式
webSocket.send(JSON.stringify(data));
}
//关闭socket
export function webSocketClose () {
webSocket.close()
console.log("对话连接已关闭");
websocket和socket
// }
}
//在其他需要socket地⽅调⽤的函数，⽤来发送数据及接受数据
export function sendSock (agentData, callback) {
globalCallback = callback;//此callback为在其他地⽅调⽤时定义的接收socket数据的函数，此关重要。
//下⾯的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。
switch (adyState) {
//CONNECTING：值为0，表⽰正在连接。
case webSocket.CONNECTING:
setTimeout(function () {
console.log('正在连接。。。');
webSocketSend(agentData, callback);
}, 1000);
break;
//OPEN：值为1，表⽰连接成功，可以通信了。
case webSocket.OPEN:
console.log('连接成功');
webSocketSend(agentData);
break;
//CLOSING：值为2，表⽰连接正在关闭。
case webSocket.CLOSING:
setTimeout(function () {
console.log('连接关闭中');
webSocketSend(agentData, callback);
}, 1000);
break;
//CLOSED：值为3，表⽰连接已经关闭，或者打开连接失败。
case webSocket.CLOSED:
console.log('连接关闭/打开失败');
// do something
break;
default:
// this never happens
break;
}
}
//将初始化socket函数、发送（接收）数据的函数、关闭连接的函数export出去export default {
initWebSocket,
webSocketClose,
sendSock
};
在vuex中定义存储下接收的数据
store/modules/user.js
let state = {
webSocketMsg: ''
};
//修改state
const mutations = {
// 存储websocket推送的消息
SET_WS_MSG: (state, msg) => {
state.webSocketMsg = msg
}
}
//提交异动mutations。如果在接受块出现问题，可以把这个加上去看看
//const actions = {
//  webSockets ({ commit }) {
/
/      commit('SET_WS_MSG', 2)
//  }
//}
store/getters.js
//获取state的状态
const getters = {
webSocketMsg: state => state.user.webSocketMsg
}
export default getters
然后在聊天界⾯中开始使⽤啦 websocket.vue
<script>
import { initWebSocket, sendSock, webSocketClose } from '@/utils/websocket.js' export default {
data() {
return {
// 这个地址是后端给的，⽤来连接websocket。加密wss 未加密ws
wsUrl:'ws://地址',
}
},
// 从store中获取接收到的信息
computed: {
getSocketMsg() {
return this.$store.state.user.webSocketMsg
},
},
//监控 getSocketMsg 是否有接收到数据
watch: {
getSocketMsg: {
handler: function (val) {
},
},
//这⼀步是我对我聊天框的css设计，⼤家可以不⽤写，需要的时候再参考。
//我将接收到的信息和发出的信息都存储到obList中，然后通过监控数值变化，使聊天定位始终位于底部（css中 overflow: auto;）    obList: {
handler: function (val) {
this.$nextTick(() => {
this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight
})
},
},
immediate: true,
},
methods: {
// 点击按钮-建⽴聊天连接
customerDialog() {
initWebSocket(this.wsUrl)
},
// 接收socket回调函数返回数据的⽅法，这个函数是我在监控接受数据的时候调⽤的（上⾯的watch中）
getConfigResult(val) { },
// 点击发送按钮发送信息---发送信息的格式要和后端确认
sending() {
sendSock('发送的信息')
},
// 处理聊天框关闭事件
handleClose() {
//关闭连接
webSocketClose()
},
},
}
</script>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。