我们的项目出现聊天室、客服等需求，需要与服务器建立双全工通信，这里使用socket.io框架,
具体使用步骤可以查询官方文档，非常简单，方便。这里主要解决使用时遇到的坑。
我是用vue3搭建的项目，
问题一：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 -s2.引入两个包，并创建连接 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踩坑的文章就介绍到这了,更多相关vue3使用socket.io内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
