vue3使用socket.io的踩坑实战记录

<script src="https://cdn.socket.io/4.4.1/socket.io.min.js" 
	integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" 
	crossorigin="anonymous">
</script>

var socket = window.io.connect('http://localhost: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');
    //接收客户端发送来的消息
	socket.on('sendinfor', (msg) => {
		console.log('message: ' + msg);
		io.emit('some event',msg)
	  });
});
 
httpServer.listen(3000, () => {
  console.log('listening on *:3000');
});

npm i vue-socket.io -s
npm i socket.io-client -s

<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)
			// })
			// //接受服务端发来的消息
			// socket.io.on('backinfor',(data) =>{
			// 	console.log(data)
			// })
			
			function sendinf(){
				if(infor.value){
					//向服务器发送消息
					socket.io.emit('sendinfor',socketid,infor.value)
				}
			}
			
			
			return {
			}
		}
	}
</script>

module.exports = {
  //开启代理服务器的方式二
  devServer: {
  	proxy: {
		'/wsq': {
		//需要访问的服务器地址
			target: 'http://localhost:3000',
		//后面空格替换前面，确保服务器有这个地址
			pathRewrite: {'^/wsq':''},
		//false时，以原域名访问服务器；true时，原域名变成服务器域名访问
		changeOrigin:true
		},
  	}
  }
}

var socket = window.io.connect('http://localhost:8080/wsq')

var io = new Server(httpServer,{
//配置cors，解决同源策略问题
  cors: {
    origin: "*",
	methods:['GET','POST']
  }
});