常州网站制作哪家好,礼品网站建设策划,网站开发需求说明书模板,paypal账号注册无语 前置#xff1a; VUE3 前端集成scoket-io socket.io-client Sringboot 3.0JDK17集成Netty-SocketIO Netty-SocketIO
失败原因一#xff1a;
前期决定要写demo时候#xff0c;单独了解了#xff0c;后端引入Netty-SocketIO注意事项#xff0c;详见我先头写的博客 前…无语 前置 VUE3 前端集成scoket-io socket.io-client Sringboot 3.0JDK17集成Netty-SocketIO Netty-SocketIO
失败原因一
前期决定要写demo时候单独了解了后端引入Netty-SocketIO注意事项详见我先头写的博客 前端也确实引入成功了scoket-io-client 但是 这两者之间是有版本兼容性问题的。。。。。 不同的前端版本请求参数不同 举例1 /socket.io/?EIO3transportpollingtNnwU34x 与 /socket.io/?EIO4transportpollingtNnwU34x 区别就在于EIO不同这个EIO什么意思呢指的是调整SMB协议的版本。前端不同socket.io通信模式不同。 恰恰后端Netty-SocketIO不同版本针对EIO有版本问题。 2.0.3能和scoket-io-client(4版本)通信但是2.0.2就不行注意2.0.3版本以上鉴权方法有变化。
解决方案
后端更改版本
dependencygroupIdcom.corundumstudio.socketio/groupIdartifactIdnetty-socketio/artifactIdversion2.0.3/version
/dependency前端更改版本
npm install socket.io-client4.7.0
socket.io-client: ^4.7.0另外前端整体代码如下
templatedivh1聊天室/h1br/div idconsole classwelldiv v-for(msg, index) in messages :keyindex classmessage{{ msg }}/div/divel-form classdemo-form-inline submit.native.preventel-input v-modelmessage placeholder随便输点啥 classinput-xlarge/el-inputel-input v-modeltoUser placeholder私聊发给谁 classinput-xlarge/el-inputel-button typeprimary clicksendJoin加入群聊/el-buttonel-button typeprimary clicksendGroup群聊/el-buttonel-button typeprimary clicksendChat私聊/el-buttonel-button typeprimary clicksendBroadcast广播消息/el-buttonel-button typeprimary clicksendConnect连接/el-buttonel-button typeprimary clicksendDisconnect断开/el-button/el-form/div
/templatescript setup
import { onMounted, onUnmounted, ref,} from vue;
import { ElForm, ElInput, ElButton } from element-plus;
import moment from moment;
import {io} from socket.io-client;// 引入Element Plus组件
defineOptions({ components: { ElForm, ElInput, ElButton } });// 定义数据属性
let message ref();
const toUser ref();
const messages ref([]);const token ref(user Math.floor(Math.random() * 1000) 1);
const socket ref(null);
const url http://127.0.0.1:8081?token${token.value};const output (newMessage) {console.log(newMessage);messages.value.unshift(${moment().format(YYYY-MM-DD HH:mm:ss.SSS)} - ${newMessage});
};onMounted(() {}
)
const sendConnect () {socket.value io.connect(url);socket.value.on(connect, () output(span classconnect-msg系统通知: ${token.value}成功连接至websocket服务器/span));socket.value.on(join, (data) output(span classsys-msg${data.groupId} 群通知: 新人 ${data.userId} 请爆照/span));socket.value.on(group, (data) output(span classusername-msg${data.groupId} 群消息: ${data.fromUid} 说: ${data.message}/span));socket.value.on(chat, (data) output(span classusername-msg系统通知: 收到来自 ${data.fromUid} 的悄悄话: ${data.message}/span));console.log(socket.value.connected);
};
// 以下函数需要根据实际情况完成与后端的交互逻辑
const sendJoin () {socket.value.emit(join, {userId: token.value,groupId: 666,});
};
const sendGroup () {socket.value.emit(group, {fromUid: token.value,groupId: 666,message: message.value});
};
const sendChat () {socket.value.emit(chat, {fromUid: token.value,toUid: toUser.value,message: message.value});
};//广播 todo
const sendBroadcast () {};
/scriptstyle scoped
/* 在此处添加 scoped 样式 */
/style人生就是不断挑战不熟悉的领域共勉。
