今天小编给大家分享一下vue3使用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项目里使用这个插件是为了贴合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来监听端口
以上就是“vue3使用socket.io的出现的问题怎么解决”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。