vue3使用socket.io的出现的问题怎么解决

今天小编给大家分享一下vue3使用socket.io的出现的问题怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

问题一：vue-socket.io与socket.io的区别

一、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');
    //接收客户端发送来的消息
    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.引入两个包，并创建连接 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)
            // })
            // //接受服务端发来的消息
            // socket.io.on('backinfor',(data) =>{
            //     console.log(data)
            // })

            function sendinf(){
                if(infor.value){
                    //向服务器发送消息
                    socket.io.emit('sendinfor',socketid,infor.value)
                }
            }

            return {
            }
        }
    }
</script>

用socket来接收这个实例，其他api都在socket.io上，如socket.io.emit(EVENTNAME,arg)发送消息。

注：不知道为什么，我这二用socket.io.on()接收不到消息。知道的同学评论区提醒一下。

第一种方法没有问题。

问题二：受同源策略的影响，怎样跨域

方式一、vue3前端代理服务器（用这种方法还是连接不上），建议在服务端配置cors

在vue.config.js文件里写如下代码,没有该文件的话，则自己在根目录下创建同名文件

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

创建连接时使用：http:localhost:8080/wsq

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

配置代理服务器具体逻辑，取vue官网查看

方式二、服务端

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

注：socket.io必须要用http来监听端口