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

JavaScript010

vue+node.js+socket.io+express 一对一聊天,第1张

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('<h1>你好web秀</h1>')

})

/*开始*/

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.17 8

    vuex: {},

}))

3.在页面

<template>

    <div>

      <div>

        <p>聊天窗口</p>

        <div id="chatContent">

        </div>

      </div>

      <div>

        <input v-model="xvalue" />

        <button @click="Getvabk">发送</button>

        <button @click="Getbackvabk">退出</button>

      </div>

    </div>

</template>

<script>

    export default {

        name: "Mypersonal-zxlx",

      data(){

        return{

          fslista:[],

          jsLista:[],

          xvalue:'',

        }

      },

      created() {

      },

      mounted() {

        //发送信息给服务端

        this.$socket.emit('join',{

          username: this.xvalue,

          userid:"fs",//这个是你的id

          password: 'password'

        })

      },

      sockets: {

        connection() {

          //加入聊天

          this.$socket.emit('join',{

            username: this.xvalue,

            userid:"fs",//这个是你要聊天对方的id

            password: 'password'

          })

        },

        receivemsg(data) {                                 //监听receivemsg事件,方法是后台定义和提供的

          console.log(data)

          this.cs(data)

        },

        logout(data) {                                 //监听logout事件,方法是后台定义和提供的

          console.log(data)

          this.cs(data)

        },

      },

      methods:{

        Getbackvabk(){

          this.$socket.emit('disconnecta',{

            username: this.xvalue,

            userid:"fs",

            password: 'password'

          })

        },

        Getvabk(){

          //发送信息给服务端

          this.$socket.emit('sendmsg',{

            username: this.xvalue,

            userid:"js",

            password: 'password'

          })

        },

          cs(data){

            let chatContent = document.getElementById('chatContent')

            let newMsg = document.createElement('div')

            let msgContent = document.createElement('span')

            newMsg.append(msgContent)

            msgContent.innerText = data.msg

            newMsg.classList.add('self-msg')

            chatContent.append(newMsg)

          }

      }

    }

</script>

<style scoped>

</style>

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

<template>

<div>

  cs

  <div>

    <p>聊天窗口</p>

    <div id="chatContent">

    </div>

  </div>

  <div>

    <input v-model="xvalue" />

    <button @click="Getvabk">发送</button>

  </div>

</div>

</template>

<script>

    export default {

        name: "cs",

      data(){

          return{

            xvalue:""

          }

      },

      created() {

      },

      mounted() {

        this.$socket.emit('join',{

          username: this.xvalue,

          userid:"js",//对于客服来说这是客服的id

          password: 'password'

        })

      },

      sockets: {

        connection() {

          this.$socket.emit('join',{

            username: this.xvalue,

            userid:"js",

            password: 'password'

          })

        },

        receivemsg(data) {                                 //监听message事件,方法是后台定义和提供的

          console.log(data)

          this.cs(data)

        },

        logout(data) {                                 //监听message事件,方法是后台定义和提供的

          console.log(data)

          this.cs(data)

        },

      },

      methods:{

        Getvabk(){

          //发送信息给服务端

          this.$socket.emit('sendmsg',{

            username: this.xvalue,

            userid:"fs",////对于客服来说这是客户的id

            password: 'password'

          })

        },

        cs(data){

          let chatContent = document.getElementById('chatContent')

          let newMsg = document.createElement('div')

          let msgContent = document.createElement('span')

          newMsg.append(msgContent)

          msgContent.innerText = data.msg

          newMsg.classList.add('self-msg')

          chatContent.append(newMsg)

        }

      }

    }

</script>

<style scoped>

</style>

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

发现一款强大的开源聊天框架 Spika 。 它不仅提供iOS,Android,Web端的源码,还有后端的源码,都是开源的。Spika的提供者是来自克罗地亚的一家移动APP公司 Clover Studio 感谢他们的团队把这个项目从头到脚都开源了。

相对于传统的LAMP(LINUX, APACHE, MYSQL,PHP), Node.js + MongoDB 是一种比较新的后端组合。Google自己的聊天平台Google Messaging Cloud(GMC)就是基于Node.JS+MongoDB实现的。

废话不多说,开始使用吧!

安装服务器端

1.环境配置。 官网 上提供的是Ubuntu14.04版的配置过程。见下图:

由于我用的服务器是Amazon Linux,用yum来安装。

git clone git://github.com/nodejs/node.git

cd node

git checkout v4.4.7

./configure

make

sudo make install

sudo su

vi /etc/sudoers

:/usr/local/bin```

3.安装imagemagick

5.安装Spika

6.安装gulp

sudo npm install gulp -g

7.编写配置文件

把Config.host和port的值设为自己服务器的hostname和port, 把Config.chatDatabaseUrl的值改为mongoDB的路径。最好用1024以上的port。mongoDB如果没有修改安全选项的话,最好用127.0.0.1。

8 . 运行项目

这时候可能会报错

找不到jsdoc。 解决方法:

然后再次运行

开启服务器

node src/server/main.js

这个时候用浏览器登陆

主机号:端口号/spika

就可以开始聊天啦!

除了web版,它还有android和ios版,下次再尝试吧:)

1.Node.js最适合在流媒体应用程序中使用,还有一些聊天应用程序。

2.游戏服务器 - 需要一次处理数千个请求的快速和高性能服务器,这是一个理想的框架。

3.广告服务器 - 再次在这里你可以有数千个请求从中央服务器提取广告,Node.js可以是一个理想的框架来处理这个问题。

4.流服务器 - 使用Node的另一个理想方案是用于多媒体流服务器,其中客户端有请求从该服务器提取不同的多媒体内容。