vue3使用socket.io的出現(xiàn)的問題怎么解決

今天小編給大家分享一下vue3使用socket.io的出現(xiàn)的問題怎么解決的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

問題一：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.在需要的頁面使用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)目里使用這個插件是為了貼合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來接收這個實(shí)例，其他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)聽端口

以上就是“vue3使用socket.io的出現(xiàn)的問題怎么解決”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。