精华内容
下载资源
问答
  • 1.安装:npm install vue-socket.io ...let vueSocketIo = new VueSocketIO({ debug: true, connection: 'http://106.75.105.96:18888' }) // 监听connect事件,设置isSuccessConnect为true vueSocketIo.io.on('con.

    1.安装: npm install vue-socket.io --save

    2.引入main.js

    import VueSocketIO from 'vue-socket.io'
    
    let vueSocketIo = new VueSocketIO({
      debug: true,
      connection: 'http://106.75.105.96:18888'
    })
    
    // 监听connect事件,设置isSuccessConnect为true
    vueSocketIo.io.on('connect', () => {
      console.log('socket connect from main.js')
      store.commit('CONNECT_SUCCESS', true)
    })
    Vue.use(vueSocketIo)

     

    3.在组件中定义sockets,和methods同级

      sockets: {
        // socket自带事件
        connect () {
          // 监听socket连接
          console.log('socket 已经连接了!');
        },
        // 监听后台事件,方法是后台定义和提供
        newAlert (data) {
          console.log('执行服务端方法---------------', data);
        },
      },

    但是亲测监听不到后台传过来的数据,暂时不清楚原因是什么

    4.在app.vue的mounted中打印

    console.log(this.sockets)  发现了有一个listener属性,用以下方法可以监听到后台发过来的数据
        this.sockets.listener.subscribe('newAlert', function (data) {
          console.log(data)
          this.$store.commit('EVENT_COUNT', true)
        })
        this.sockets.listener.subscribe('connect', (data) => {
          console.log('++++++++++',data)
        })
    6.给后台发送数据
    // auth 是后台定义的,要发送的数据放到第二个参数
    this.$socket.emit("auth", {}) 

     

    展开全文
  • Vue-Socket.io是Vuejs的socket.io集成,易于使用,支持Vuex和组件级套接字使用者管理 演示版 ...import VueSocketIO from 'vue-socket.io' Vue . use ( new VueSocketIO ( { debug : true , connection
  • vue.js socket.io的使用

    千次阅读 2018-12-16 17:20:34
    安装依赖包 npm install vue-socket.io --save ...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://localhost:3000', vuex: { } }...

    安装依赖包

    npm install vue-socket.io --save

    main.js文件配置

    import VueSocketIO from 'vue-socket.io'
    
    Vue.use(new VueSocketIO({
        debug: true,
        connection: 'http://localhost:3000',
        vuex: {
        }
    }))
    
    

    客户端使用

    //发送信息给服务端
    this.$socket.emit('login',{username:this.zhanghao,password:this.password});
    //login 自定义名字
    //{username:this.zhanghao,password:this.password}   发送数据集合
    
    //接收服务端的信息
    this.sockets.subscribe('relogin', (data) => {
           console.log(data.unsuccessful)
    })

    服务端使用

    新建一个文件夹,并新建一个 package.json 文件

    //package.json
    {
      "name": "realtime-server",
      "version": "0.0.1",
      "description": "my first realtime server",
      "dependencies": {}
    }

    在此文件夹安装 依赖

    npm install --save express
    npm install --save socket.io

     新建一个 index.js 文件

    //index.js
    var app = require('express')();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);
    
    //数据库操作
    // var mysql  = require('mysql');
    // var connection = mysql.createConnection({
    //   host     : 'localhost',
    //   user     : 'root',
    //   password : 'root',
    //   port: '3306',
    //   database: 'vue_elem',
    // });
    //
    // var  sql = 'SELECT * FROM users WHERE `username`=? and `password`=?';
    // var  data=[1,1];
    // connection.query(sql,data,function (err, result) {
    //         if(err){
    //           console.log('[SELECT ERROR] - ',err.message);
    //           return;
    //         }else{
    //             console.log(result[0]);
    //         }
    // });
    
    app.get('/', function(req, res){
        res.send('<h1>Welcome Realtime Server</h1>');
    });
    
    io.on('connection',function(socket) {
        socket.on('login', function (obj) {                //接收数据
    
            console.log(obj.username);
            socket.emit('relogin',{unsuccessful:1,user:result[0]});  //发送数据
        });
    });
    
    
    http.listen(3000, function(){
        console.log('listening on *:3000');
    });

    运行:

    node index.js

    参考:https://blog.csdn.net/luo200618/article/details/52135724

     

     

    如果您有什么不明白的地方其它想问的可以关注我的公众号,给我留言,我会尽可能的帮您解决遇到的问题

    ps:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验调色设定,欢迎交流,哈哈哈哈哈

     

    展开全文
  • import VueSocketIO from 'vue-socket.io' Vue . use ( new VueSocketIO ( { debug : true , connection : 'http://metinseylan.com:1992' , vuex : { store , actionPrefix : 'SOCKET_' ,
  • Vue-Socket.io的使用步骤

    千次阅读 2019-10-10 15:13:36
    第一步安装依赖 npm install vue-socket.io --save ...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://metinseylan.com:1992', vuex: { ...

    第一步安装依赖

    npm install vue-socket.io --save
    

    第二步在main.js中引入

    import VueSocketIO from 'vue-socket.io'
    Vue.use(new VueSocketIO({
        debug: true,
        connection: 'http://metinseylan.com:1992',
        vuex: {
            store,
            actionPrefix: 'SOCKET_', //为vuex设置的两个前缀
            mutationPrefix: 'SOCKET_'
        },
        options: { path: "/my-app/" } //Optional options
    }))
    

    第三步,在组件中使用推送消息给后台,连接socket,

      sockets: {
        //查看socket是否渲染成功
        connect() {
          console.log("链接成功");
        },
        disconnect(){
          console.log("断开链接");
        },//检测socket断开链接 
        reconnect(){
          console.log("重新链接");
        },
        //客户端接收后台传输的socket事件
        message(data) {
          this.$notify({
            title: '新消息',
            message: data,
            type: 'warning',
            duration:10000
          });
          console.log("data", data);//接收的消息
        }
      },
    

    客户端往服务端发消息

    this.$socket.emit("register","客户端需要帮助了" );
    

    vuex的使用

    	state: {
    	  message:''
    	},
        mutations: {
            SOCKET_message:(state, data)=>{
               state.message = data;
            }
       }
    

    详细讲解见官方github https://github.com/MetinSeylan/Vue-Socket.io

    在这里插入图片描述

    展开全文
  • 服务端: node.js 前端环境: uni-app 需要依赖:vue-socket.iosocket.io-client ...import VueSocketio from 'vue-socket.io' import socketio from 'socket.io-client'; Vue.use(new VueSocketio({ debug: tr...

    服务端: node.js 

    前端环境: uni-app

    需要依赖: vue-socket.io  socket.io-client

    // main.js
    import VueSocketio from 'vue-socket.io'
    import socketio from 'socket.io-client';
    
    Vue.use(new VueSocketio({
      debug: true,
      connection: socketio('http://真实线上地址:3300')
    }))
    

    nginx配置 nginx.conf

    server {
      location /socket.io/ {
        proxy_pass http://127.0.0.1:3300/;    
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
      }
    }

    原因: 会自动添加/socket.io前缀

    展开全文
  • vue-socket.io,

    2020-03-04 11:57:28
    1、npm install vue-socket.io --save 2、main.js中引入 ...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'https://ceshih5.cn:2120', vuex: { st...
  • vue 使用 socket 实现即时通讯

    千次阅读 2020-09-04 11:14:59
    安装依赖 ...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ // 控制台调试 console.log debug: true, // 连接地址 后端提供 connection: 'http://localhost:3000', // vue..
  • vue中使用vue-socket.io

    万次阅读 2017-06-23 17:48:16
    vue-socket.io的使用 参照vue-socket.io的git地址说明文档进行安装 ...import VueSocketio from 'vue-socket.io'; Vue.use(VueSocketio, 'http://socketserver.com:1923'); 在组件中使用 ex...
  • vue使用Vue-Socket.io

    2020-02-01 22:02:11
    1、vue安装vue-socket.io: npm i vue-socket.io 2、引入vue-socket.io ...import VueSocketIO from "vue-socket.io" Vue.use(new VueSocketIO({ debug: true, connection: 'http://localhost:3000', /...
  • vue中使用socket.io

    千次阅读 2018-11-08 13:51:40
    安装 npm install vue-socket.io ...import VueSocketio from 'vue-socket.io'; Vue.use(VueSocketio, 'http://socketserver.com:1923'); 在组件中使用 export default{ data(){ return{ id:...
  • vue + vue-socket.io实例

    2021-01-27 17:20:54
    import VueSocketIO from 'vue-socket.io' // import SocketIO from 'socket.io-client' const options = { path: '/v1/videoMeeting/socket.io', transports: ['websocket'] } Vue.use(new VueSocketIO({ debug:
  • 前端vue-socket.io后端Java netty-socketio传信息 一:vue 1.package.json ...import VueSocketIO from 'vue-socket.io' import io from 'socket.io-client' Vue.use( new VueSocketIO({ debug: false, conn
  • web-msg-sender vue-socket.io

    2019-10-08 09:52:24
    客户端:...后端:web-msg-sender 前端代码 main.js import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://demo.com:2120...
  • Vue.js 对Socket.IO使用

    2020-10-19 17:30:53
    Vue.js 如何使用 Socket.IO Vue.js 中 Socket.IO的使用 ...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, // 服务器端地址 connection: 'http://localhost:3000', vue.
  • vue+vue-socket.io 的使用

    2021-07-18 21:43:26
    import VueSocketIO from 'vue-socket.io' import SocketIO from 'socket.io-client'; Vue.use(new VueSocketIO({ debug: true, // 生产环境记得关闭 connection: SocketIO.connect('***',{ // *** 与后台确定链接...
  • 问题:因项目需要用到socketIO进行通讯,通过npm install vue-socket.io,后将其运入...import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: 'http://172.16.101.250:2...
  • vue 使用socke报错

    2020-07-20 15:57:54
    报错信息(socke 版本低的问题): 1、解决方案 npm install socket.io... import VueSocketIO from 'vue-socket.io'; Vue.use(new VueSocketIO({ debug: true, connection: SocketIO(’ip地址’) }); data
  • vue-socket.io的使用

    千次阅读 2019-05-24 20:12:56
    参照vue-socket.io的git地址说明文档 npm install vue-socket.io ...import VueSocketio from 'vue-socket.io'; Vue.use(VueSocketio, 'http://socketserver.com:1923'); 在组件中使用 export default{ data(){ r...
  • socketio在vue中的使用

    千次阅读 2019-04-10 16:51:21
    在vue中的使用 ...import VueSocketio from 'vue-socket.io' 挂载(后面是服务器地址) Vue.use(VueSocketio, 'http://47.92.118.237:5001/') 使用 socket和data、mounted、methods同级 data(){ ...
  • 前端剧院共享 该存储库包含用VueJS编写...就从VueSocketio发送和接收消息而言,我决定使用VueSocketio而不是socket.io,因为它与Vue集成良好。 我面临的一个挑战是能够根据套接字响应动态更改vue组件。 但是,通过完成
  • import VueSocketio from 'vue-socket.io'; // ws://192.168.1.66:8888是后台给你的地址 Vue.use(new VueSocketio({ debug: true, connection: socketio.connect('ws://192.168.1.66:8888?userId=111', { /
  • import VuesocketIo from ‘vue-socket.io’ //引入axios import axios from ‘axios’; //配置axios axios.defaults.baseURL = ‘http://127.0.0.1:3000’; //把axios作为一个Vue全局属性添加 Vue.prototype.$...
  • socket.io 客户端与服务器应用

    千次阅读 2020-09-27 15:25:40
    import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection: process.env.NODE_ENV === 'development' ? 'http://localhost:7178' : 'http://xx.xx.xx.xx:7178', vuex: {
  • Vue-Socket.io

    2017-11-10 22:28:00
    github地址:https://github.com/MetinSeylan/Vue-Socket.io 安装: npm install vue-socket.io -S 注册: ...import VueSocketio from 'vue-socket.io' Vue.use(VueSocketio, 'http://sock...
  • vue2.* 中 使用socket.io

    2021-03-29 10:35:21
    ... 安装 vue-socket.io (大神封装好的vue插件)npm install vue-socket.io --save 注册和使用import VueSocketIO from 'vue-socket.io' Vue.use(new VueSocketIO({ debug: true, connection...
  • vue+express+socket.io实现前后端保持长连接 1.安装依赖包 #vue npm install vue-socket.io --...import VueSocketio from 'vue-socket.io'; Vue.use(new VueSocketio({ debug: true, connection: 'http://127.0.0
  • vue 中如何使用socket

    万次阅读 2018-05-16 09:15:20
    vue中使用socket协议vue-cli 脚手架目录结构1.参照vue-socket.io的git地址说明文档进行...vue.use 里面的链接是后台的提供给你的socket地址// socketimport VueSocketio from 'vue-socket.io';Vue.use(VueSocketio,...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 241
精华内容 96
关键字:

vuesocketio

vue 订阅