咱们要讲个jquery项目，用了websocket省事多了，不必费劲儿解决那些乱七八糟的模块和组件问题，按照文档来就行！不过到了Vue项目这可不大一样喔！得考虑各种可能出现的情况哩。那给你介绍下“vue-native-websocket”这个神奇的东东，帮你在Vue项目里顺顺利利搞起群聊来！别着急，先看看我们做出来的效果图呗～
vue-native-websocket安装 # yarn | npm 安装 yarn add vue-native-websocket | npm install vue-native-websocket --save
咱们今儿就来聊聊怎么在Vue项目中用websocket。你可能觉得这个复杂一点，但实际上要针对每个问题进行详细分析！我今天就想跟大家说说怎么使用vue-native-websocket，还有它的用法和配置之类的东西。不过要先说好要是没学会vuex那可能就要费劲了。
得了，咱们赶紧上手呗，使用这VENUE-NATIVE-WEBSOCKET插件先。首先，你得把它加到MAIN.JS文件里去。别忘了给它设置点参数另外，就是在VUEX的mutations和actions那块儿安插个相应的函数就完事儿了。
// main.js
// base.lkWebSocket为你服务端websocket地址
Vue.use(VueNativeSock,base.lkWebSocket,{
// 启用Vuex集成,store的值为你的vuex
store: store,
// 数据发送/接收使用使用json格式
format: "json",
// 开启自动重连
reconnection: true,
// 尝试重连的次数
reconnectionAttempts: 5,
// 重连间隔时间
reconnectionDelay: 3000,
// 将数据进行序列化，由于启用了json格式的数据传输这里需要进行重写
passToStoreHandler: function (eventName, event) {
if (!eventName.startsWith('SOCKET_')) { return }
let method = 'commit';
let target = eventName.toUpperCase();
let msg = event;
if (this.format === 'json' && event.data) {
msg = JSON.parse(event.data);
if (msg.mutation) {
target = [msg.namespace || '', msg.mutation].filter((e) => !!e).join('/');
} else if (msg.action) {
method = 'dispatch';
target = [msg.namespace || '', msg.action].filter((e) => !!e).join('/');
}
}
this.store[method](target, msg);
this.store.state.socket.message = msg;
}
});
快来学着怎么用群聊！只需在信息接收那边添上一个onmessage监测器（和安装时的位置一样哈），这样就能畅快地聊天了！
// vuex配置文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
token:"",
userID:"",
// 用户头像
profilePicture: "",
socket: {
// 连接状态
isConnected: false,
// 消息内容
message: '',
// 重新连接错误
reconnectError: false
}
},
mutations: {
SOCKET_ONOPEN (state, event) {
// 连接打开触发的函数
Vue.prototype.$socket = event.currentTarget;
state.socket.isConnected = true
},
SOCKET_ONCLOSE (state, event) {
// 连接关闭触发的函数
state.socket.isConnected = false;
console.log(event);
},
SOCKET_ONERROR (state, event) {
// 连接发生错误触发的函数
console.error(state, event)
},
SOCKET_ONMESSAGE (state, message) {
// 收到消息时触发的函数
state.socket.message = message
},
SOCKET_RECONNECT(state, count) {
// 重新连接触发的函数
console.info(state, count)
},
SOCKET_RECONNECT_ERROR(state) {
// 重新连接失败触发的函数
state.socket.reconnectError = true;
},
},
actions: {
customerAdded (context) {
// 新连接添加函数
console.log('action received: customerAdded');
console.log(context)
}
},
modules: {
}
})
别忘了搞定发消息、网页渲染还有分析消息这三个大件事。这就像做饭，每一步都不能少！加油，核对好每一条消息中 userID 是否与咱们vuex里存着的那个人一致。
Vue搭建个聊天室，咋整？赶紧给你们说说，希望帮到你！
// 监听消息接收
this.$options.sockets.onmessage = (res)=>{
// res.data为服务端返回的数据
const data = JSON.parse(res.data);
// 200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改)
if(data.code===200){
// 连接建立成功
console.log(data.msg);
}else{
// 获取服务端推送的消息
const msgObj = {
msg: data.msg,
avatarSrc: data.avatarSrc,
userID: data.userID
};
// 渲染页面:如果msgArray存在则转json
if(lodash.isEmpty(localStorage.getItem("msgArray"))){
this.renderPage([],msgObj,0);
}else{
this.renderPage(JSON.parse(localStorage.getItem("msgArray")),msgObj,0);
}
}
};
好，今天咱们就先聊到这儿！想了解更多设置信息的朋友，赶紧翻翻npm仓库，肯定有收获！别忘了用vue-native-websocket这款插件搞起群聊玩耍加油鸭！所有的都告诉你们！希望你们会喜欢这篇推送哦（比心）。如果有啥问题或建议尽管找我记得也要和小伙伴们分享哟～
// 消息发送函数
sendMessage: function (event) {
if (event.keyCode === 13) {
// 阻止编辑框默认生成div事件
event.preventDefault();
let msgText = "";
// 获取输入框下的所有子元素
let allNodes = event.target.childNodes;
for(let item of allNodes){
// 判断当前元素是否为img元素
if(item.nodeName==="IMG"){
msgText += `/${item.alt}/`;
}
else{
// 获取text节点的值
if(item.nodeValue!==null){
msgText += item.nodeValue;
}
}
}
// 消息发送: 消息内容、状态码、当前登录用户的头像地址、用户id
this.$socket.sendObj({msg: msgText,code: 0,avatarSrc: this.$store.state.profilePicture,userID: this.$store.state.userID});
// 清空输入框中的内容
event.target.innerHTML = "";
}
}
评论0