vue实现websocket客服聊天功能 vue实现websocket客服聊天功能

本文章主要介绍如何实现一个基本的聊天，后续会添加表情包，传照片等功能
其实刚开始接触的时候，我最大的疑惑是聊天功能的前期是否需要搭建什么框架、下载一些什么东西之类的，结果就是，其实websocket可以直接使用，然后前后端搭配，也是免费的，暂时没发现需要收费功能的东西~ 能帮到你就赶紧点个赞啦~O>.O
实现效果图：

文章图片

首先封装一个websocket.js文件（大家可以直接复制，然后把接收/发送数据之类的格式改成自己的就可以啦）

import store from '@/store'var webSocket = null; var globalCallback = null; //定义外部接收数据的回调函数//初始化websocketexport function initWebSocket (url) {//判断浏览器是否支持websocketif ("WebSocket" in window) {webSocket = new WebSocket(url); //创建socket对象} else {alert("该浏览器不支持websocket!"); }//打开webSocket.onopen = function () {webSocketOpen(); }; //收信webSocket.onmessage = function (msg) {webSocketOnMessage(msg); }; //关闭webSocket.onclose = function () {webSocketClose(); }; //连接发生错误的回调方法webSocket.onerror = function () {console.log("WebSocket连接发生错误"); }; }//连接socket建立时触发export function webSocketOpen () {console.log("WebSocket连接成功"); }//客户端接收服务端数据时触发,e为接受的数据对象export function webSocketOnMessage (e) {// 存储在store中，然后在聊天界面中监控变化自动拿取收到的信息store.commit('user/SET_WS_MSG', e)}//发送数据export function webSocketSend (data) {console.log('发送数据'); //在这里根据自己的需要转换数据格式webSocket.send(JSON.stringify(data)); }//关闭socketexport function webSocketClose () {webSocket.close()console.log("对话连接已关闭"); // }}//在其他需要socket地方调用的函数，用来发送数据及接受数据export function sendSock (agentData, callback) {globalCallback = callback; //此callback为在其他地方调用时定义的接收socket数据的函数，此关重要。//下面的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。switch (webSocket.readyState) {//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 somethingbreak; default:// this never happensbreak; }}//将初始化socket函数、发送（接收）数据的函数、关闭连接的函数export出去export default {initWebSocket,webSocketClose,sendSock};

在vuex中定义存储下接收的数据
【vue实现websocket客服聊天功能】store/modules/user.js

let state = { webSocketMsg: ''}; //修改stateconst mutations = {// 存储websocket推送的消息SET_WS_MSG: (state, msg) => {state.webSocketMsg = msg}}//提交异动mutations。如果在接受块出现问题，可以把这个加上去看看//const actions = { //webSockets ({ commit }) { //commit('SET_WS_MSG', 2) //}//}

store/getters.js