vue+node.js+socket.io+express 一对一聊天

node.js

npm install socket.io

第一:node.js服务器端

基于node.js和express

const express = require('express')

const app = express()

const query=require('./mysql/connect')

const port = 2000

const pddUrl = 'http://192.168.1.178'

var server = require('http').Server(app);

var io = require('socket.io')(server);

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({

    extended:true

}));

//设置跨域访问

app.all("*",function(req,res,next){

    //设置允许跨域的域名,*代表允许任意域名跨域

    res.header("Access-Control-Allow-Origin","*");

    //允许的header类型

    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    //跨域允许的请求方式

    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");

    if (req.method.toLowerCase() == 'options')

        res.send(200);  //让options尝试请求快速结束

    else

        next();

})

app.get('/', function(req, res){

    res.send('

你好web秀

');

});

/*开始*/

let arrAllSocket = [];

io.on('connection',function(socket) {

    /***********加入聊天****************/

    //obj模型

   /*

   obj={

      username: this.xvalue,

      userid:"fs",

      password: 'password'

   }

   */

    socket.on('join', function (obj) {

        console.log(obj.userid+'join')

        arrAllSocket[obj.userid] = socket

    })

    /***********************************/

    /****** 接收某人发送的消息*********/

    socket.on('sendmsg', function (data) {

        console.log(data)

        let target = arrAllSocket[data.userid]

        let res = {

            code: 200,

            msg:data.username,

            self:true,

        }

        if (target) {

            //发送信息至指定的人

            target.emit('receivemsg', res)

            console.log(res)

        }

    });


    /************监听用户退出***************/

    socket.on('disconnecta', function(data){

        let res = {

            code: 200,

            msg:`${data.userid}已退出聊天室`,

            self:true,

        }

        io.emit('logout',res);

        console.log(data.userid+'退出了聊天室');

    });

});

server.listen(port,() => console.log(`Example app listening on port ${pddUrl}:${port}`))

第二步:a页面-----客户

1.安装依赖

npm install vue-socket.io --save

2.在main.js中引入

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({

    debug: true,

    connection: 'xx',//这是路径比如:http://192.168.1.178

    vuex: {},

}))

3.在页面

第三步:b页面------客服端口

--------------------------end结束-------------------

你可能感兴趣的:(vue+node.js+socket.io+express 一对一聊天)