安装依赖包

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:如果您对摄影感兴趣,也可以关注我的公众号,不定时会分享自己的摄影经验和调色设定,欢迎交流,哈哈哈哈哈