vue3使用socket.io的踩坑實(shí)戰(zhàn)記錄
我們的項(xiàng)目出現(xiàn)聊天室、客服等需求,需要與服務(wù)器建立雙全工通信,這里使用socket.io框架,
具體使用步驟可以查詢官方文檔,非常簡(jiǎn)單,方便。這里主要解決使用時(shí)遇到的坑。
我是用vue3搭建的項(xiàng)目,
問(wèn)題一:vue-socket.io與socket.io的區(qū)別
一、socket.io
1.在項(xiàng)目的入口文件index.js用socket鏈接
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"> </script>
2.在需要的頁(yè)面使用window.io.connect('---') ---表示服務(wù)器地址
var socket = window.io.connect('http://localhost:3000')
我用node.js在本地3000端口上寫了服務(wù)器
服務(wù)端代碼
var {createServer} = require('http') var {Server} = require('socket.io') var httpServer = createServer() var io = new Server(httpServer,{ //配置cors,解決同源策略問(wèn)題 cors: { origin: "*", methods:['GET','POST'] } }); // io.on('connection', (socket) => { console.log('a user connected'); //接收客戶端發(fā)送來(lái)的消息 socket.on('sendinfor', (msg) => { console.log('message: ' + msg); io.emit('some event',msg) }); }); httpServer.listen(3000, () => { console.log('listening on *:3000'); });
二、vue-socket.io
注: vue-socket.io vue項(xiàng)目里使用這個(gè)插件是為了貼合vue的格式,方便書寫,但有問(wèn)題。
可以直接使用socket.io-client這個(gè)插件完成客戶端的代碼。
1.需要下載vue-socket.io和socket.io-client包
npm i vue-socket.io -s npm i socket.io-client -s
2.引入兩個(gè)包,并創(chuàng)建連接 new vueSocketIo({connection:SocketIO('服務(wù)器地址')})
<script> // import vueSocketIo from 'vue-socket.io' // import SocketIO from 'socket.io-client' export default { name:'Socketserver', setup(){ // const socketOptions = { // autoConnect: true, // 自動(dòng)連接 // } // //建立websocket連接 // var socket = new vueSocketIo({ // debug:true, // connection:SocketIO('http://localhost:5001',socketOptions) // }) // //接受服務(wù)端發(fā)來(lái)的消息 // socket.io.on('backinfor',(data) =>{ // console.log(data) // }) function sendinf(){ if(infor.value){ //向服務(wù)器發(fā)送消息 socket.io.emit('sendinfor',socketid,infor.value) } } return { } } } </script>
用socket來(lái)接收這個(gè)實(shí)例,其他api都在socket.io上,如socket.io.emit(EVENTNAME,arg)發(fā)送消息。
注:不知道為什么,我這二用socket.io.on()接收不到消息。知道的同學(xué)評(píng)論區(qū)提醒一下。
第一種方法沒(méi)有問(wèn)題。
問(wèn)題二:受同源策略的影響,怎樣跨域
方式一、vue3前端代理服務(wù)器(用這種方法還是連接不上),建議在服務(wù)端配置cors
在vue.config.js文件里寫如下代碼,沒(méi)有該文件的話,則自己在根目錄下創(chuàng)建同名文件
module.exports = { //開(kāi)啟代理服務(wù)器的方式二 devServer: { proxy: { '/wsq': { //需要訪問(wèn)的服務(wù)器地址 target: 'http://localhost:3000', //后面空格替換前面,確保服務(wù)器有這個(gè)地址 pathRewrite: {'^/wsq':''}, //false時(shí),以原域名訪問(wèn)服務(wù)器;true時(shí),原域名變成服務(wù)器域名訪問(wèn) changeOrigin:true }, } } }
創(chuàng)建連接時(shí)使用:http:localhost:8080/wsq
var socket = window.io.connect('http://localhost:8080/wsq')
配置代理服務(wù)器具體邏輯,取vue官網(wǎng)查看
方式二、服務(wù)端
var io = new Server(httpServer,{ //配置cors,解決同源策略問(wèn)題 cors: { origin: "*", methods:['GET','POST'] } });
注:socket.io必須要用http來(lái)監(jiān)聽(tīng)端口
總結(jié)
到此這篇關(guān)于vue3使用socket.io踩坑的文章就介紹到這了,更多相關(guān)vue3使用socket.io內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒(méi)有效果的解決方案 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能
Vue.js是當(dāng)下很火的一個(gè)JavaScript MVVM庫(kù),它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。下面這篇文章主要給大家介紹了關(guān)于利用Vue.js實(shí)現(xiàn)求職在線之職位查詢功能的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-07-07vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟
這篇文章主要給大家介紹了關(guān)于vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟,圖片切換是一個(gè)很經(jīng)典的Vue入門學(xué)習(xí)案例,在你學(xué)習(xí)完一些基本的v-指令后,你可以嘗試去寫一個(gè)簡(jiǎn)單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下2023-11-11圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08