vue3使用socket.io的踩坑實戰(zhàn)記錄
我們的項目出現(xiàn)聊天室、客服等需求,需要與服務(wù)器建立雙全工通信,這里使用socket.io框架,
具體使用步驟可以查詢官方文檔,非常簡單,方便。這里主要解決使用時遇到的坑。
我是用vue3搭建的項目,
問題一:vue-socket.io與socket.io的區(qū)別
一、socket.io
1.在項目的入口文件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.在需要的頁面使用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,解決同源策略問題 cors: { origin: "*", methods:['GET','POST'] } }); // io.on('connection', (socket) => { console.log('a user connected'); //接收客戶端發(fā)送來的消息 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項目里使用這個插件是為了貼合vue的格式,方便書寫,但有問題。
可以直接使用socket.io-client這個插件完成客戶端的代碼。
1.需要下載vue-socket.io和socket.io-client包
npm i vue-socket.io -s npm i socket.io-client -s
2.引入兩個包,并創(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, // 自動連接 // } // //建立websocket連接 // var socket = new vueSocketIo({ // debug:true, // connection:SocketIO('http://localhost:5001',socketOptions) // }) // //接受服務(wù)端發(fā)來的消息 // 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來接收這個實例,其他api都在socket.io上,如socket.io.emit(EVENTNAME,arg)發(fā)送消息。
注:不知道為什么,我這二用socket.io.on()接收不到消息。知道的同學(xué)評論區(qū)提醒一下。
第一種方法沒有問題。
問題二:受同源策略的影響,怎樣跨域
方式一、vue3前端代理服務(wù)器(用這種方法還是連接不上),建議在服務(wù)端配置cors
在vue.config.js文件里寫如下代碼,沒有該文件的話,則自己在根目錄下創(chuàng)建同名文件
module.exports = { //開啟代理服務(wù)器的方式二 devServer: { proxy: { '/wsq': { //需要訪問的服務(wù)器地址 target: 'http://localhost:3000', //后面空格替換前面,確保服務(wù)器有這個地址 pathRewrite: {'^/wsq':''}, //false時,以原域名訪問服務(wù)器;true時,原域名變成服務(wù)器域名訪問 changeOrigin:true }, } } }
創(chuàng)建連接時使用:http:localhost:8080/wsq
var socket = window.io.connect('http://localhost:8080/wsq')
配置代理服務(wù)器具體邏輯,取vue官網(wǎng)查看
方式二、服務(wù)端
var io = new Server(httpServer,{ //配置cors,解決同源策略問題 cors: { origin: "*", methods:['GET','POST'] } });
注:socket.io必須要用http來監(jiān)聽端口
總結(jié)
到此這篇關(guān)于vue3使用socket.io踩坑的文章就介紹到這了,更多相關(guān)vue3使用socket.io內(nèi)容請搜索腳本之家以前的文章或繼續(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沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05圖文詳解vue中proto文件的函數(shù)調(diào)用
這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-08-08