websocket的socket.io使用前端详解 后端为java

多的不说了，这次又是做一个实时聊天功能，第一印象就是websocket，在网上找了一堆帖子，发现了socket.io这个宝藏，因为我们后端使用的是Java。所以常规的socket.io肯定是用不了的，这个时候就发现netty-socketio这篇文章。前端使用socket.io是可以直接连接到的。现在就开始使用吧

第一步当然是下载， 因为vue有自带的vue-socket.io，所以我们直接npm install 就行

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

然后在main.js进行声明

//socket
import VueSocketIO from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(new VueSocketIO({
  debug: true, //  debug检测  开启后会有提示
  connection: socketio( 'xxx', {
    path: '',
    transports: ['websocket', 'polling'],
  }),
  options: {
    autoConnect: false // 关闭自动连接，一般是在用户登录过后才进行手动连接
  }
})); //xxx填后台给的socket地址，端口号根据实际后台端口写

大家也可以去socket.io官方文档进行查看

然后在组件内的使用就是这样的

  export default {
    data() {
      return {
        timer: 0
      };
    },
    mounted() {
      this.$socket.open()
      this.$socket.connect()
    },
    sockets: { // 这儿是直接监听有没有触发socket请求  可以在这儿进行声明
      //连接成功
      connect(data) {
        console.log('连接成功', data)
      },
      //断开重连 在此位置会进行多次的重新连接 直到连接成功
      reconnect(data) {
        this.$socket.emit('connect', 1)
      },
      // 获取返回的列表  这个方法名是后台自定义的
      GetChatListVoListRes(res) {
        this.messList = res.list
      },
    },
    // 页面销毁时记得关闭连接
    beforeDestroy() {
      // 关闭 Socket
      this.$socket.close();
    },
    methods: {
      getMessList() {
        // 向后台发送请求 后台进行接收参数  这些名称都是由后端声明  前端进行调用
        this.$socket.emit('GetChatListVoList', this.query)
        // 这儿就是进行取值操作了  获取后台返回的值 是一直进行监听的
        this.sockets.subscribe('GetChatListVoListRes', (res) => {
          this.messList = res.list
          console.log(res.list)
        })
      },
    }
  }

这个时候，前端的工作就结束了， 如果还没有打印的话，就是后端的锅了。正常情况下，到这儿就该结束了，但是我发现一个问题，那就是我是用uniapp写的小程序。而这一堆代码，只能在h5页面，也就是浏览器才会调用。上面写了半天，结果压根没有调用，当场崩溃  ，还好这个时候找了找解决方案，发现uniapp也有socket.io。这个时候就让我们来看一下怎么实现的

// 第一步，建立一个文件夹，存放文件 weapp.socket.io.js
资源地址：https://blog-static.cnblogs.com/files/sanyekui/weapp.socket.io.js

// 第二步，在main.js文件中建立socket.js文件
const uniio = require("./weapp.socket.io.js"); // 引入 socket.io
// 在全局声明 socket
Vue.prototype.$socket = uniio.connect("url地址", {
  transports: ['websocket'],
  path: '',
});

这一段参考了这一篇文章，感兴趣的可以去看一看    链接地址

当然  我们之前写的代码可不能浪费了   还是可以接着使用的只是需要改一下

// 我们传值的方式没有改变   还是之前的方式
this.$socket.emit('GetChatListVoList', this.query)
// 需要改变的是监听取值的方式  改成这个样子
this.$socket.on('GetChatListVoListRes', (res) => {
   this.messList = res.list
})

这样小程序和app也能正常调用了