vue2、node、和微信小程序怎么做socket.io通信

最新推荐文章于 2024-07-24 23:00:08 发布

jsBugYao

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量964

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_53244180/article/details/127968229

版权

1、vue2中的相关配置

1、下载vue2中相关socket.io依赖包

1、npm install socket.io-client@4.5.3,
2、npm install vue-socket.io@3.0.10

2、配置socket.io的连接地址

//导入相关配置
import VueSocketIO  from 'vue-socket.io' 
import SocketIO from 'socket.io-client'

Vue.use(
  new VueSocketIO({
    // debug:true,
    // https://61211w73f7.zicp.fun
    // http://127.0.0.1:1730'
    // http://43.143.211.211
    //第一个参数是要连接的地址
    connection: SocketIO('http://43.143.211.211:1730', {
      autoConnect: false // 取消自动连接     
    }),
    // extraHeaders: { 'Access-Control-Allow-Origin': '*' }

  })
)

3、页面中连接socket.io

   // 链接socket
      socketEmit(){
        // console.log(this.$socket.open)
      // 开始连接 socket
        this.$socket.open();
      // 订阅事件，testCall 是与后端约定好的名称
        this.sockets.subscribe('send1', (res) => {
          console.log(res)
            this.getOrderList()
        })
        // console.log(this.sockets)
      
    },
        

    //事件触发socket.io
     this.$socket.emit("my other event",{openId:e.openId})


create(){
    this.socketEmit()
}

2、 node中的配置socket.io

1、安装配置

npm install socket.io

2 、配置实例化socket.io

const express= require("express")
let app = express("app")

//挂载app
var http = require('http').Server(app);

//创建socket.io实例
var io = require('socket.io')(http,{cors:true});

io.on('connect', (socket) => {
    console.log('有人连接成功了')
    // 后台发起的接收订单
    socket.on('my other event', function (data) {
      // console.log(data)
      // console.log("已回复")
      socket.broadcast.emit(data.openId,data)
    })
    // 用户连接
    socket.emit('open', {data:'恭喜你收到了信息'})
  

    // 用户发起订单
    socket.on("pay",()=>{
      console.log("泥马死了")
      socket.broadcast.emit('send1','奶奶的')
    })

     // 监听客户端断开
    socket.on('disconnect', () => {
      console.log('客户端断开')
    })
  })