vue3使用socket.io的踩坑實(shí)戰(zhàn)記錄
我們的項(xiàng)目出現(xiàn)聊天室、客服等需求，需要與服務(wù)器建立雙全工通信，這里使用socket.io框架,
具體使用步驟可以查詢官方文檔，非常簡(jiǎn)單，方便。這里主要解決使用時(shí)遇到的坑。
我是用vue3搭建的項(xiàng)目，
問題一：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，解決同源策略問題
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項(xiàng)目里使用這個(gè)插件是為了貼合vue的格式，方便書寫,但有問題。
可以直接使用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ā)來的消息
// 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來接收這個(gè)實(shí)例，其他api都在socket.io上，如socket.io.emit(EVENTNAME,arg)發(fā)送消息。
注：不知道為什么，我這二用socket.io.on()接收不到消息。知道的同學(xué)評(píng)論區(qū)提醒一下。
第一種方法沒有問題。
問題二：受同源策略的影響，怎樣跨域
方式一、vue3前端代理服務(wù)器（用這種方法還是連接不上），建議在服務(wù)端配置cors
在vue.config.js文件里寫如下代碼,沒有該文件的話，則自己在根目錄下創(chuàng)建同名文件
module.exports = {
//開啟代理服務(wù)器的方式二
devServer: {
proxy: {
'/wsq': {
//需要訪問的服務(wù)器地址
target: 'http://localhost:3000',
//后面空格替換前面，確保服務(wù)器有這個(gè)地址
pathRewrite: {'^/wsq':''},
//false時(shí)，以原域名訪問服務(wù)器；true時(shí)，原域名變成服務(wù)器域名訪問
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，解決同源策略問題
cors: {
origin: "*",
methods:['GET','POST']
}
});注：socket.io必須要用http來監(jiān)聽端口
總結(jié)
到此這篇關(guān)于vue3使用socket.io踩坑的文章就介紹到這了,更多相關(guān)vue3使用socket.io內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js中的插槽（slot）是一種機(jī)制，允許你在組件的模板中預(yù)留一些位置，以便父組件可以將任意內(nèi)容插入到這些位置，這使得組件更加靈活和可復(fù)用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
本文主要介紹了vue單頁(yè)面應(yīng)用部署配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在Vue2中注冊(cè)全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下2022-07-07
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(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)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue的底層原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue制作點(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)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04