vue的webpack配置（前端之vue3使用WebSocket）
导读：WebSocket WebSocket说明...
WebSocket
WebSocket说明
WebSocket 是全双工网络通信通信协议 ，实现了客户端和服务器的平等对话 ，任何一方都可以主动发送数据 。并且在第一次建立后 ，就一直保持连接 。
WebSocket图示
客户端使用WebSocket
vue3中, 客户端使用WebSocket步骤
setup(props) { // 1.建立链接 -- 携带cookie参数 var ws = new WebSocket( `ws://localhost:9000/judge/submit?satoken=${cookieValue}` ); // 2. ws.send()给服务器发送信息 let submitCode = JSON.stringify({ userId: id, problemId: props.problemId, isDebug: "0", lang: lang.value, code: code.value, info: "", }); ws.send(submitCode); // 3.服务器每次返回信息都会执行一次onmessage方法 ws.onmessage = function (e) { console.log("服务器返回的信息: " + e.data); if (e.data === "judging") { showTitleClass.color = "green"; showTitle.value = "judging..."; showRes.value = ""; } else if (e.data === "connected") { showTitleClass.color = "green"; showTitle.value = ""; } }; // 4.卸载前, 关闭链接 onUnmounted(() => { ws.close(); }); },更多方法
使用构造函数,新建ws实例
// 执行完本语句,客户端就会与服务器进行连接 。 var ws = new WebSocket("wss://echo.websocket.org");连接成功后的回调函数
ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!"); }; // 若需要多个回调 实例.addEventListener // ws.addEventListener(open, function (event) { // ws.send(Hello Server!); // });用于指定收到服务器数据后的回调函数 。
服务器数据可能是文本 ，也可能是二进制数据（blob对象或Arraybuffer对象） ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.close(); };指定连接关闭后的回调函数 。用法同open
ws.onclose = function(evt) { console.log("Connection closed."); };
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！