在express+vue-client系统中使用socket.io

大家好哇，今天再来讲讲在express框架和vue脚手架中使用socket.io的方法

接上一篇博客，已经是写好express后台的socket接口了，有不懂的小伙伴，可以去看看我的上一篇博客，里面涉及到一些简单的html示例，个人感觉还是可以看的理解的。
那今天我们来看看，如何在vue中引入socket.io吧。
首先需要在vue项目中下载两个包，分别是vue-socket.io和socket.io-client，注意，虽然说vue-socket.io已经包含了socket.io-client，但是和我们要使用的client是不一样的，所以一定要下载两个：

npm install vue-socket.io
npm install socket.io-client

然后，需要到main.js中进行全局引用，当然，你想要在特定的页面引用也是没有问题，毕竟是模块引入所以不造成影响，这里我只介绍全局引入，大家有需要可以私聊我，在main.js中，导入两个模块，然后创建连接，之后挂载到vue身上：

// 引入socketio
import VUESOCKETIO from 'vue-socket.io'
import Socketio from 'socket.io-client'
Vue.config.productionTip = false
// 使用socketio
const SOCKETIO = new VUESOCKETIO({
    
    
  debug: true,
  connection: Socketio('ws://localhost:3000')
})
Vue.use(SOCKETIO) // 挂载

之后就可以在想要制作聊天界面的页面使用socket啦，这个socket是挂载到this.$socket身上的，所以使用的时候需要在mounted钩子函数身上触发socket连接，使用如下代码：

mounted () {
    
    
    this.username = Date.now() //这个是因为要标志用户身份才出的，简单使用到时间戳
    this.$socket.connect()
  },

然后简单设置一个输入框来输入内容和一个提交按钮：

 <input type="text" v-model="msg">
 <button @click="printmsg">打印信息</button>
 //data
 data () {
    
    
    return {
    
    
      username: '',
      msg: ''
    }
  },

然后，来看看printmsg函数怎么写，思路大概就是，点击提交之后，触发后端的message事件，后端又再次触发前端的message行为，所以我们需要在前端定义多一个message行为函数，挂在socket身上：

sockets: {
    
    
    message (obj) {
    
    
      console.log(obj, '这个才是真的')
    }
  },
  //methods
  methods: {
    
    
    printmsg () {
    
    
      const that = this
      this.$socket.emit('message', {
    
     userid: that.username, content: that.msg })
    }
   }

然后我们打开浏览器两个窗口，都输入localhost:8080，同时保证express后台保存运行状态，不断在两个窗口输入信息，提交，会看到控制台打印的内容和后台打印的内容：


好滴，那文章就到这里，里面的“信息”有点那个，其实是对象啦，大家请忽略哇~