欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3使用socket.io的踩坑實(shí)戰(zhàn)記錄

 更新時(shí)間:2023年03月18日 09:09:03   作者:WYHID  
Socket.io將Websocket和輪詢機(jī)制以及其它的實(shí)時(shí)通信方式封裝成了通用的接口,并且在服務(wù)端實(shí)現(xiàn)了這些實(shí)時(shí)機(jī)制的相應(yīng)代碼,下面這篇文章主要給大家介紹了關(guān)于vue3使用socket.io踩坑的相關(guā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)文章

  • vue中slot插槽的參數(shù)匯總及使用方案

    vue中slot插槽的參數(shù)匯總及使用方案

    Vue.js中的插槽(slot)是一種機(jī)制,允許你在組件的模板中預(yù)留一些位置,以便父組件可以將任意內(nèi)容插入到這些位置,這使得組件更加靈活和可復(fù)用,本文主要介紹了vue中slot插槽的參數(shù)匯總及使用方案,需要的朋友可以參考下
    2024-03-03
  • vue單頁(yè)面應(yīng)用部署配置詳解

    vue單頁(yè)面應(yīng)用部署配置詳解

    本文主要介紹了vue單頁(yè)面應(yīng)用部署配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析

    defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析

    這篇文章主要介紹了defineProps宏函數(shù)不需要從vue中import導(dǎo)入的原因解析,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • 在Vue2中注冊(cè)全局組件的兩種方法詳解

    在Vue2中注冊(cè)全局組件的兩種方法詳解

    這篇文章主要介紹了在Vue2中注冊(cè)全局組件的兩種方法,非常的細(xì)致,需要的朋友可以參考下
    2022-07-07
  • 解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題

    解決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實(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-07
  • Vue的底層原理你了解多少

    Vue的底層原理你了解多少

    這篇文章主要為大家詳細(xì)介紹了Vue的底層原理,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02
  • vue制作點(diǎn)擊切換圖片效果的詳細(xì)思路與步驟

    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)用

    這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-08-08
  • 詳解vue3的沙箱機(jī)制

    詳解vue3的沙箱機(jī)制

    這篇文章主要介紹了vue3的沙箱機(jī)制的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-04-04

最新評(píng)論