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)文章
這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存
這篇文章主要介紹了vue單頁面實現(xiàn)當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存，在當(dāng)前頁面刷新或跳轉(zhuǎn)時提示保存并可取消刷新，以防止填寫的表單內(nèi)容丟失，感興趣的小伙伴們可以參考一下2018-11-11
解決vue項目路徑不正確,自動跳轉(zhuǎn)404的問題
這篇文章主要介紹了解決vue項目路徑不正確,自動跳轉(zhuǎn)404的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中組件(Component)和插件(Plugin)的區(qū)別及說明
這篇文章主要介紹了Vue中組件(Component)和插件(Plugin)的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細介紹了Vue和原生JS中如何使用自定義字體,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue如何進行數(shù)據(jù)代理,通過本文學(xué)習(xí)我們了解如何代理的及驗證兩條線的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
今天小編就為大家分享一篇vue 實現(xiàn)邊輸入邊搜索功能的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 國際化 vue-i18n 雙語言 語言包的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了Vue異步加載about組件的相關(guān)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10