最近学妹刚好学node,向我请教做个练手小项目,秉持着为前端输出高质量妹纸的伟大事业理念,于是准备教她用vue + node + socket.io做个烂大街的聊天室

  • 服务端app.js最简单的代码
const express = require('express')
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

io.on('connection', socket => {
    console.log('ws连接成功', socket);
});
 
server.listen(3335,function () {
    console.log('3335服务启动');
})

vue随手找到了vue-socket.io这个插件,用法很简单:

  • 先安装一下
npm install vue-socket.io
  • 然后在main.js中注册
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:3335')
}))
  • npm run dev运行起来,然后直接两个大错呼我脸上,而且还在重复不停的跳出来

在这里插入图片描述

嗯?在我学妹面前打我脸?这我能忍?仔细一看,不对啊!websocket会跨域!?随手查一下,发现原来vue-socket.io其实是socket.io的封装,而socket.io会先通过polling方式看客户端能不能用websocket,那vue跨域怎么办?老鸟肯定第一时间想到用代理啊,又简单的查一下,因为每次请求都自带’/socket.io’,在vue.config.js里敲个简单的代理

module.exports = {
    devServer: {
        proxy: {
            '/socket.io': {
                target: 'http://localhost:3335',
                ws: true,
                changeOrigin: true
            },
            'sockjs-node': {
                target: 'http://localhost:3335',
                ws: false,
                changeOrigin: true
            },
        }
    }
}

运行一下,嗯?怎么还报一样的跨域啊?代理没错啊,服务端代码有问题?这也还没到服务端啊,看看网上的代码,都一样啊,都是写代理,要么就是下面服务端代码修改

  • 给 socket.io 赋值一个新的端口? 没解决!
const io = require('socket.io')(server)
io.listen(3333)
  • 给 socket.io 各种配置跨域? 没解决!
// 这种
const io = require("socket.io")(server, { cors: true })
// 或者这种
const io = require("socket.io")(server, {origins: '*:*'}})
// 或者这种
const io = require("socket.io")(server, {
    cors: {
        origin: '*'
    }
})

弄了小半天,学妹都开始有点质疑我的时候,突然灵机一动,既然服务端、代理出问题的地方不大的话,是不是注册的时候url有问题,既然它会自动加上 ‘/socket.io’ ,那么我应该给 ‘/’ 而不是完整的url啊,于是将main.js里的代码改成

import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('/')
}))

果然,服务端监听到连接了,也不报错了

> node-dev server/app.js

3335服务启动
ws连接成功
  • 给home.vue加上客户端的连接api
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  sockets: {
    connect: function(){
      console.log('vue 链接成功');
    },
  }
}

最终成功连上打印
在这里插入图片描述
补充: 后续还看到一种方法,根据上方所说,socket.io会先通过polling方式看客户端能不能用websocket,我们如果确定能用websocket的话,直接给配置成websocket模式,就不用走代理了,直接添加一个{ transports: [‘websocket’] }

// 服务端:
const io = require('socket.io')(server, {
    transports: ['websocket']
}) 

// 客户端:
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
  debug: true,
  connection: SocketIO('http://localhost:3335', {
    transports: ['websocket']
  })
}))

当然,最后的最后,学妹把怀着我满满心意的代码,负责人一栏直接写上了某个帅学弟的名字。

Logo

前往低代码交流专区

更多推荐