vue3使用socket.io的踩坑實戰(zhàn)記錄
我們的項目出現(xiàn)聊天室、客服等需求，需要與服務器建立雙全工通信，這里使用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('---') ---表示服務器地址
var socket = window.io.connect('http://localhost:3000')我用node.js在本地3000端口上寫了服務器
服務端代碼
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('服務器地址')})
<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)
// })
// //接受服務端發(fā)來的消息
// socket.io.on('backinfor',(data) =>{
// console.log(data)
// })
function sendinf(){
if(infor.value){
//向服務器發(fā)送消息
socket.io.emit('sendinfor',socketid,infor.value)
}
}
return {
}
}
}
</script>用socket來接收這個實例，其他api都在socket.io上，如socket.io.emit(EVENTNAME,arg)發(fā)送消息。
注：不知道為什么，我這二用socket.io.on()接收不到消息。知道的同學評論區(qū)提醒一下。
第一種方法沒有問題。
問題二：受同源策略的影響，怎樣跨域
方式一、vue3前端代理服務器（用這種方法還是連接不上），建議在服務端配置cors
在vue.config.js文件里寫如下代碼,沒有該文件的話，則自己在根目錄下創(chuàng)建同名文件
module.exports = {
//開啟代理服務器的方式二
devServer: {
proxy: {
'/wsq': {
//需要訪問的服務器地址
target: 'http://localhost:3000',
//后面空格替換前面，確保服務器有這個地址
pathRewrite: {'^/wsq':''},
//false時，以原域名訪問服務器；true時，原域名變成服務器域名訪問
changeOrigin:true
},
}
}
}創(chuàng)建連接時使用：http:localhost:8080/wsq
var socket = window.io.connect('http://localhost:8080/wsq')配置代理服務器具體邏輯，取vue官網(wǎng)查看
方式二、服務端
var io = new Server(httpServer,{
//配置cors，解決同源策略問題
cors: {
origin: "*",
methods:['GET','POST']
}
});注：socket.io必須要用http來監(jiān)聽端口
總結
到此這篇關于vue3使用socket.io踩坑的文章就介紹到這了,更多相關vue3使用socket.io內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js中的插槽（slot）是一種機制，允許你在組件的模板中預留一些位置，以便父組件可以將任意內容插入到這些位置，這使得組件更加靈活和可復用，本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下2024-03-03
本文主要介紹了vue單頁面應用部署配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
defineProps宏函數(shù)不需要從vue中import導入的原因解析
這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導入的原因解析,本文給大家介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在Vue2中注冊全局組件的兩種方法,非常的細致,需要的朋友可以參考下2022-07-07
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
Vue.js是當下很火的一個JavaScript MVVM庫，它是以數(shù)據(jù)驅動和組件化的思想構建的。下面這篇文章主要給大家介紹了關于利用Vue.js實現(xiàn)求職在線之職位查詢功能的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
這篇文章主要為大家詳細介紹了Vue的底層原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要給大家介紹了關于vue制作點擊切換圖片效果的詳細思路與步驟,圖片切換是一個很經典的Vue入門學習案例,在你學習完一些基本的v-指令后,你可以嘗試去寫一個簡單的demo去鞏固和熟悉這些指令的使用方法,需要的朋友可以參考下2023-11-11
這篇文章主要給大家介紹了vue中proto文件函數(shù)調用的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了vue3的沙箱機制的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04