diff --git a/build/dev-server.js b/build/dev-server.js
index 42442d2..196d6a3 100644
--- a/build/dev-server.js
+++ b/build/dev-server.js
@@ -125,41 +125,55 @@ var server = app.listen(port)
 // var http = require('http').Server(app);
 var io = require('socket.io')(server);
 var Message = require('../models/message')
-var users = {}
+global.users = {}
+
 io.on('connection', function (socket) {
   //监听用户发布聊天内容
   socket.on('message', function (obj) {
     //向所有客户端广播发布的消息
-    console.log(obj)
-    io.emit('message', obj)
     var mess = {
       username: obj.username,
       src:obj.src,
       msg: obj.msg,
-      roomid:'room1'
+      img: obj.img,
+      roomid: obj.room
+    }
+    io.to(mess.roomid).emit('message', mess)
+    console.log(obj.username + '对房' + mess.roomid+'说：'+ mess.msg)
+    if (obj.img === '') {
+      var message = new Message(mess)
+      message.save(function (err, mess) {
+        if (err) {
+          console.log(err)
+        }
+        console.log(mess)
+      })
     }
-    var message = new Message(mess)
-    message.save(function (err, mess) {
-      if (err) {
-        console.log(err)
-      }
-      console.log(mess)
-    })
-    console.log(obj.username + '说：' + obj.msg)
   })
   socket.on('login',function (obj) {
-    socket.name = obj.name;
-    users[obj.name] = obj
-    io.emit('login', users)
+    socket.name = obj.name
+    socket.room = obj.roomid
+    if (!global.users[obj.roomid]) {
+      global.users[obj.roomid] = {}
+    }
+    global.users[obj.roomid][obj.name] = obj
+    socket.join(obj.roomid)
+    io.to(obj.roomid).emit('login', global.users[obj.roomid])
+    console.log(obj.name + '加入了' + obj.roomid)
   })
-  socket.on('logout',function (name) {
-    delete users[name]
-    io.emit('logout', users)
+  socket.on('logout',function (obj) {
+    delete  global.users[obj.roomid][obj.name]
+    console.log(obj.name + '退出了' + obj.roomid)
+    io.to(obj.roomid).emit('logout', global.users[obj.roomid])
   })
+
   socket.on('disconnect', function () {
-    delete users[socket.name]
-    //用户监听用退出聊天室
-    io.emit('logout', users)
+    if (global.users[socket.room]) {
+      delete global.users[socket.room][socket.name]
+      // 用户监听用退出聊天室
+      console.log(socket.name + '退出了' + socket.room)
+      io.to(socket.room).emit('logout', global.users[socket.room])
+    }
   })
 })
 
diff --git a/config/routes.js b/config/routes.js
index f4e279b..d3b2670 100644
--- a/config/routes.js
+++ b/config/routes.js
@@ -1,6 +1,9 @@
 var User = require('../models/user')
 var Message = require('../models/message')
 var superagent = require('superagent')
+var fs = require('fs')
+var multiparty = require('multiparty');
+var util = require('util')
 module.exports = function (app) {
   app.use(function (req, res, next) {
     var _user = req.session.user
@@ -9,6 +12,65 @@ module.exports = function (app) {
 
     next()
   })
+  app.post('/file/uploadimg', function (req, res, next) {
+    // console.log(util.inspect(req.body, { showHidden: true, depth: null }))
+    // console.log(util.inspect(req.header, { showHidden: true, depth: null }))
+    // //生成multiparty对象，并配置上传目标路径
+    var form = new multiparty.Form()
+    // //设置编辑
+    form.encoding = 'utf-8'
+    // //设置文件存储路径
+    form.uploadDir = "./static/files/"
+    // //设置单文件大小限制
+    form.maxFilesSize = 2 * 1024 * 1024
+    // form.maxFields = 1000;  设置所以文件的大小总和
+    // 上传完成后处理
+    form.parse(req, function (err, fields, files) {
+      console.log(fields)
+      var filesTmp = JSON.stringify(files, null, 2)
+      console.log(filesTmp)
+      if (err) {
+        console.log('parse error: ' + err)
+        res.json({
+          errno: 1
+        })
+      } else {
+        var inputFile = files.file[0];
+        var uploadedPath = inputFile.path
+        var array = inputFile.originalFilename.split('.')
+        var imgtype = array[array.length - 1]
+        var dstPath = './static/files/' + new Date().getTime() + '.' + imgtype
+        //重命名为真实文件名
+        fs.rename(uploadedPath, dstPath, function (err) {
+          if (err) {
+            console.log('rename error: ' + err)
+            res.json({
+              errno: 1
+            })
+          } else {
+            var mess = {
+              username: fields.username,
+              src: fields.src,
+              img: dstPath,
+              roomid: fields.roomid
+            }
+            var message = new Message(mess)
+            message.save(function (err, mess) {
+              if (err) {
+                console.log(err)
+              }
+              console.log(mess)
+            })
+            console.log('rename ok')
+            res.json({
+              errno: 0
+            })
+          }
+        })
+      }
+    })
+
+  })
   // 注册
   app.post('/user/signup', function (req, res) {
     var _user = req.body
@@ -36,84 +98,88 @@ module.exports = function (app) {
       }
     })
   }),
-  // 登录
-  app.post('/user/signin', function (req, res) {
-    console.log(req.body)
-    var _user = req.body
-    var name = _user.name
-    var password = _user.password
-    console.log(password)
-    User.findOne({name: name}, function (err, user) {
-      if (err) {
-        console.log(err);
-      }
-      console.log(user)
-      if (!user) {
-        res.json({
-          errno: 1,
-          data: '用户不存在'
-        })
-      } else{
-        if (!!password) {
-          user.comparePassword(password, function (err, isMatch) {
-            if (err) {
-              console.log(err);
-            }
-            if (isMatch) {
-              req.session.user = user;
-              console.log('success');
-              res.json({
-                errno: 0,
-                data: '登录成功',
-                name: name,
-                src: user.src
-              })
-            } else {
-              res.json({
-                errno: 1,
-                data: '密码不正确'
-              })
-              console.log('password is not meached');
-            }
-          })
-        } else {
+    // 登录
+    app.post('/user/signin', function (req, res) {
+      console.log(req.body)
+      var _user = req.body
+      var name = _user.name
+      var password = _user.password
+      console.log(password)
+      User.findOne({name: name}, function (err, user) {
+        if (err) {
+          console.log(err);
+        }
+        console.log(user)
+        if (!user) {
           res.json({
             errno: 1,
-            data: '登录失败'
+            data: '用户不存在'
           })
+        } else {
+          if (!!password) {
+            user.comparePassword(password, function (err, isMatch) {
+              if (err) {
+                console.log(err);
+              }
+              if (isMatch) {
+                req.session.user = user;
+                console.log('success');
+                res.json({
+                  errno: 0,
+                  data: '登录成功',
+                  name: name,
+                  src: user.src
+                })
+              } else {
+                res.json({
+                  errno: 1,
+                  data: '密码不正确'
+                })
+                console.log('password is not meached');
+              }
+            })
+          } else {
+            res.json({
+              errno: 1,
+              data: '登录失败'
+            })
+          }
         }
-      }
 
-    })
-  }),
-  // 信息
-  app.get('/message',function (req, res) {
-    Message.find({}, function (err, message) {
-      if(err) {
-        console.log(err)
-      } else{
-        res.json({
-          errno: 0,
-          data: message
-        })
-      }
-    })
-  }),
-  // 机器人消息
-  app.get('/robotapi',function (req, res) {
-    var response = res
-    var info = req.query.info
-    var userid = req.query.id
-    var key = 'fde7f8d0b3c9471cbf787ea0fb0ca043'
-    superagent.post('http://www.tuling123.com/openapi/api')
-      .send({info, userid, key})
-      .end((err, res) => {
-        if(err){
+      })
+    }),
+
+    // 信息
+    app.get('/message', function (req, res) {
+      var id = req.query.roomid
+      // console.log(id)
+      Message.find({roomid: id}, function (err, message) {
+        if (err) {
           console.log(err)
+        } else {
+          // console.log(message)
+          res.json({
+            errno: 0,
+            data: message
+          })
         }
-        response.json({
-          data: res.text
-        })
       })
-  })
+    }),
+    // 机器人消息
+    app.get('/robotapi', function (req, res) {
+      var response = res
+      var info = req.query.info
+      var userid = req.query.id
+      var key = 'fde7f8d0b3c9471cbf787ea0fb0ca043'
+      superagent.post('http://www.tuling123.com/openapi/api')
+        .send({info, userid, key})
+        .end((err, res) => {
+          if (err) {
+            console.log(err)
+          }
+          response.json({
+            data: res.text
+          })
+        })
+    })
 }
\ No newline at end of file
diff --git a/prod.server.js b/prod.server.js
index 0ffc198..f3576d3 100644
--- a/prod.server.js
+++ b/prod.server.js
@@ -6,9 +6,9 @@ var app = express();
 
 var router = express.Router();
 // 用于静态展示入口
-router.get('/',function(req,res,next){
-	req.url = './index.html';
-	next();
+router.get('/', function (req, res, next) {
+  req.url = './index.html';
+  next();
 });
 
 app.use(router);
@@ -24,7 +24,7 @@ var cookieParser = require('cookie-parser')
 var session = require('cookie-session')
 // 用于异步回调
 mongoose.Promise = require('bluebird')
-global.db = mongoose.connect("mongodb://localhost:27017/vuechat")
+global.db = mongoose.connect("mongodb://localhost:27017/chat")
 
 // 服务器提交的数据json化
 app.use(bodyParser.json())
@@ -51,44 +51,55 @@ var server = app.listen(port)
 // var http = require('http').Server(app);
 var io = require('socket.io')(server);
 var Message = require('./models/message')
-var users = {}
+global.users = {}
+
 io.on('connection', function (socket) {
   //监听用户发布聊天内容
   socket.on('message', function (obj) {
     //向所有客户端广播发布的消息
-    io.emit('message', obj)
     var mess = {
       username: obj.username,
       src:obj.src,
       msg: obj.msg,
-      roomid:'room1'
+      img: obj.img,
+      roomid: obj.room
     }
-    var message = new Message(mess)
-    //将发送过来的消息进行储存
-    message.save(function (err, mess) {
-      if (err) {
-        console.log(err)
-      }
+    io.to(mess.roomid).emit('message', mess)
+    console.log(obj.username + '对房' + mess.roomid+'说：'+ mess.msg)
+    if (obj.img === '') {
+      var message = new Message(mess)
+      message.save(function (err, mess) {
+        if (err) {
+          console.log(err)
+        }
         console.log(mess)
-    })
-    console.log(obj.username + '说：' + obj.msg)
+      })
+    }
   })
   socket.on('login',function (obj) {
-    socket.name = obj.name;
-    users[obj.name] = obj
-    //用于监听用户进行聊天室
-    io.emit('login', users)
+    socket.name = obj.name
+    socket.room = obj.roomid
+    if (!global.users[obj.roomid]) {
+      global.users[obj.roomid] = {}
+    }
+    global.users[obj.roomid][obj.name] = obj
+    socket.join(obj.roomid)
+    io.to(obj.roomid).emit('login', global.users[obj.roomid])
+    console.log(obj.name + '加入了' + obj.roomid)
   })
-  socket.on('logout',function (name) {
-    delete users[name]
-    //用户监听用退出聊天室
-    io.emit('logout', users)
+  socket.on('logout',function (obj) {
+    delete  global.users[obj.roomid][obj.name]
+    console.log(obj.name + '退出了' + obj.roomid)
+    io.to(obj.roomid).emit('logout', global.users[obj.roomid])
   })
 
   socket.on('disconnect', function () {
-    delete users[socket.name]
-    //用户监听用退出聊天室
-    io.emit('logout', users)
+    if (global.users[socket.room]) {
+      delete global.users[socket.room][socket.name]
+      // 用户监听用退出聊天室
+      console.log(socket.name + '退出了' + socket.room)
+      io.to(socket.room).emit('logout', global.users[socket.room])
+    }
   })
 })
 
diff --git a/schemas/message.js b/schemas/message.js
index dd5a520..7e35d22 100644
--- a/schemas/message.js
+++ b/schemas/message.js
@@ -2,9 +2,16 @@ var mongoose = require('mongoose')
 //聊天记录模型
 var MessageSchema = new mongoose.Schema({
   username: String,
-  src:String,
-  msg: String,
-  roomid:String,
+  src: String,
+  msg: {
+    type: String,
+    default: ''
+  },
+  roomid: String,
+  img: {
+    type: String,
+    default: ''
+  },
   time: {
     type: Date,
     default: Date.now()
diff --git a/src/assets/images.png b/src/assets/images.png
new file mode 100644
index 0000000..89bfa3b
Binary files /dev/null and b/src/assets/images.png differ
diff --git "a/src/assets/\345\205\254\345\221\212.png" "b/src/assets/\345\205\254\345\221\212.png"
new file mode 100644
index 0000000..5c9dd2d
Binary files /dev/null and "b/src/assets/\345\205\254\345\221\212.png" differ
diff --git a/src/components/Chat.vue b/src/components/Chat.vue
index 2935cc7..927a69e 100644
--- a/src/components/Chat.vue
+++ b/src/components/Chat.vue
@@ -7,63 +7,118 @@
                     <div class="center">
                         聊天({{Object.keys(getusers).length}})
                     </div>
-                    <mu-icon-button icon="expand_more" slot="right"/>
+                    <mu-icon-button icon="expand_more" slot="right" @click="shownotice"/>
                 </mu-appbar>
             </div>
-            <div class="chat">
+            <div class="all-chat">
                 <div style="height:70px"></div>
                 <div>在线人员</div>
                 <div v-for="obj in getusers" class="online">
                     <img :src="obj.src" alt="">
                 </div>
+            </div>
+            <div class="chat">
                 <div v-for="obj in getmesshistoryinfos">
-                    <othermsg v-if="obj.username!=getusername" :name="obj.username" :img="obj.src" :msg="obj.msg"></othermsg>
-                    <mymsg v-if="obj.username==getusername" :name="obj.username" :img="obj.src" :msg="obj.msg"></mymsg>
+                    <othermsg v-if="obj.username!=getusername" :name="obj.username" :head="obj.src" :msg="obj.msg"
+                              :img="obj.img"></othermsg>
+                    <mymsg v-if="obj.username==getusername" :name="obj.username" :head="obj.src" :msg="obj.msg"
+                           :img="obj.img"></mymsg>
                 </div>
                 <div v-for="obj in getinfos">
-                    <othermsg v-if="obj.username!=getusername" :name="obj.username" :img="obj.src" :msg="obj.msg"></othermsg>
-                    <mymsg v-if="obj.username==getusername" :name="obj.username" :img="obj.src" :msg="obj.msg"></mymsg>
+                    <othermsg v-if="obj.username!=getusername" :name="obj.username" :head="obj.src" :msg="obj.msg"
+                              :img="obj.img"></othermsg>
+                    <mymsg v-if="obj.username==getusername" :name="obj.username" :head="obj.src" :msg="obj.msg"
+                           :img="obj.img"></mymsg>
                 </div>
                 <div style="height:120px"></div>
             </div>
             <div class="bottom">
-                <div class="input">
-                    <input type="text" id="message">
+                <div class="chat">
+                    <div class="input">
+                        <input type="text" id="message">
+                    </div>
+                    <mu-raised-button label="发送" class="demo-raised-button" primary @click="submess"/>
+                </div>
+                <div class="functions">
+                    <div class="fun-li" @click="imgupload"></div>
                 </div>
-                <mu-raised-button label="发送" class="demo-raised-button" primary @click="submess"/>
+                <input id="inputFile" name='inputFile' type='file' multiple='mutiple' accept="image/*;capture=camera"
+                       style="display: none" @change="fileup">
             </div>
-        </div >
+        </div>
     </transition>
 </template>
 
 <script type="text/ecmascript-6" scoped>
     import Mymsg from './Mymsg.vue'
     import Othermsg from './Othermsg.vue'
-    import { mapGetters } from 'vuex'
-    import io from 'socket.io-client'
+    import {mapGetters} from 'vuex'
+    // import io from 'socket.io-client'
     export default{
         data() {
-          return {
-              socket: ''
-          }
+            return {
+                socket: ''
+            }
         },
         created() {
             // socket内部，this指针指向问题
             const that = this
             // 连接websocket地址
-            this.socket = io.connect('localhost:8081')
-            this.socket.on('message', function(obj) {
+            // this.socket = io.connect('localhost:8081')
+            this.getsocket.on('message', function (obj) {
+                console.log(obj)
                 that.$store.commit('addroomdetailinfos', obj)
                 window.scrollTo(0, 900000)
             })
-            this.socket.on('logout', function (obj) {
+            this.getsocket.on('logout', function (obj) {
                 that.$store.commit('setusers', obj)
             })
         },
         methods: {
+            shownotice() {
+                this.$store.commit('changedialog')
+                this.$store.commit('changedialoginfo', '1.增加了上传图片功能       2.增加了上传图片功能')
+            },
+            fileup() {
+                var that = this
+                var file1 = document.getElementById('inputFile').files[0]
+                if (file1) {
+                    var formdata = new window.FormData()
+                    formdata.append('file', file1)
+                    formdata.append('username', that.getusername)
+                    formdata.append('src', that.getusersrc)
+                    formdata.append('roomid', that.getuserroom)
+                    // username: this.getusername,
+                    // src: this.getusersrc,
+                    this.$store.dispatch('uploadimg', formdata)
+                    var fr = new window.FileReader()
+                    fr.onload = function () {
+                        var obj = {
+                            username: that.getusername,
+                            src: that.getusersrc,
+                            img: fr.result,
+                            msg: '',
+                            room: that.getuserroom
+                        }
+                        console.log(obj)
+                        that.getsocket.emit('message', obj)
+                    }
+                    fr.readAsDataURL(file1)
+                } else {
+                    console.log('必须有文件')
+                }
+            },
+            imgupload() {
+                var file = document.getElementById('inputFile')
+                file.click()
+            },
             closechat() {
                 this.$store.commit('changechattoggle')
-                this.socket.emit('logout', this.getusername)
+                var obj = {
+                    name: this.getusername,
+                    roomid: this.getuserroom
+                }
+                this.getsocket.emit('logout', obj)
             },
             submess() {
                 // 判断发送信息是否为空
@@ -71,10 +126,12 @@
                     let obj = {
                         username: this.getusername,
                         src: this.getusersrc,
-                        msg: document.getElementById('message').value
+                        img: '',
+                        msg: document.getElementById('message').value,
+                        room: this.getuserroom
                     }
                     // 传递消息信息
-                    this.socket.emit('message', obj)
+                    this.getsocket.emit('message', obj)
                     document.getElementById('message').value = ''
                 } else {
                     this.$store.commit('changedialog')
@@ -84,10 +141,12 @@
         },
         computed: {
             ...mapGetters([
+                'getsocket',
                 'getinfos',
                 'getchattoggle',
                 'getusername',
                 'getusersrc',
+                'getuserroom',
                 'getusers',
                 'getmesshistoryinfos'
             ])
@@ -103,22 +162,24 @@
     &.fade-enter-active, &.fade-leave-active
         transition: all 0.2s linear
         transform translate3d(0, 0, 0)
+
     &.fade-enter, &.fade-leave-active
         opacity: 0
         transform translate3d(100%, 0, 0)
+
     .container
         position: absolute
-        left:0
-        top:0
-        width:100%
-        min-height:100%
+        left: 0
+        top: 0
+        width: 100%
+        min-height: 100%
         background: #ffffff
         .title
-            position:fixed
-            height:50px
-            top:0
-            width:100%
-            z-index:1
+            position: fixed
+            height: 50px
+            top: 0
+            width: 100%
+            z-index: 1
             .center
                 -webkit-box-flex: 1
                 -webkit-flex: 1
@@ -132,36 +193,54 @@
                 font-size: 20px
                 font-weight: 400
                 line-height: 56px
-                text-align:center
+                text-align: center
         .chat
+        .all-chat
             .online
-                display:inline-block
-                margin:5px
+                display: inline-block
+                margin: 5px
                 img
                     width: 40px
                     height: 40px
-                    border-radius:100%
+                    border-radius: 100%
         .bottom
-            position:fixed
-            height:50px
-            bottom:0
-            display: flex
-            .input
-                flex:1
-                background #ddd
-                padding:4px
-                input
-                    width: 100%
-                    height: 42px
-                    box-sizing: border-box
-                    border: 1px solid #ddd
-                    color: #333333
-                    font-size: 18px
-                    padding-left: 5px
-                .mu-text-field
-                    width:100%
-            .demo-raised-button
-                height:50px
-                background:#ddd
+            position: fixed
+            height: 80px
+            bottom: 0
+            background: #eeeff3
+            .chat
+                width: 100%
+                display: flex
+                .input
+                    flex: 1
+                    background: #eeeff3
+                    padding: 4px
+                    input
+                        width: 100%
+                        height: 42px
+                        box-sizing: border-box
+                        border: 1px solid #8c8c96
+                        color: #333333
+                        font-size: 18px
+                        padding-left: 5px
+                    .mu-text-field
+                        width: 100%
+                .demo-raised-button
+                    flex-basis: 88px
+                    margin-top: 4px
+                    height: 40px
+                    background: #eeeff3
+                    color: #8c8c96
+            .functions
+                width: 100%
+                .fun-li
+                    width: 40px
+                    height: 30px
+                    display: inline-block
+                .fun-li:nth-child(1)
+                    background-image: url(../assets/images.png)
+                    background-repeat: no-repeat
+                    background-size: 25px 25px
+                    background-position: center center
 
 </style>
diff --git a/src/components/Index.vue b/src/components/Index.vue
index cede275..17e0e46 100644
--- a/src/components/Index.vue
+++ b/src/components/Index.vue
@@ -1,47 +1,47 @@
 <template>
     <div class="hello">
-            <div>
-                <mu-list>
-                    <mu-sub-header>最近聊天记录</mu-sub-header>
-                    <mu-list-item title="聊天室1" @click="chatwindow">
-                        <mu-avatar src="./static/img/1.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                    <mu-list-item title="聊天室2">
-                        <mu-avatar src="./static/img/2.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                    <mu-list-item title="聊天室3">
-                        <mu-avatar src="./static/img/3.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                    <mu-list-item title="聊天室4">
-                        <mu-avatar src="./static/img/4.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                    <mu-list-item title="聊天室5">
-                        <mu-avatar src="./static/img/5.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                </mu-list>
-                <mu-divider/>
-                <mu-list>
-                    <mu-sub-header>历史聊天记录</mu-sub-header>
-                    <mu-list-item title="聊天室6">
-                        <mu-avatar src="./static/img/6.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                    <mu-list-item title="聊天室7">
-                        <mu-avatar src="./static/img/7.jpg" slot="leftAvatar"/>
-                        <mu-icon value="chat_bubble" slot="right"/>
-                    </mu-list-item>
-                </mu-list>
-            </div>
+        <div>
+            <mu-list>
+                <mu-sub-header>最近聊天记录</mu-sub-header>
+                <mu-list-item title="聊天室1" @click="chatwindow('room1')">
+                    <mu-avatar src="./static/img/1.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+                <mu-list-item title="聊天室2" @click="chatwindow('room2')">
+                    <mu-avatar src="./static/img/2.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+                <mu-list-item title="聊天室3">
+                    <mu-avatar src="./static/img/3.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+                <mu-list-item title="聊天室4">
+                    <mu-avatar src="./static/img/4.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+                <mu-list-item title="聊天室5">
+                    <mu-avatar src="./static/img/5.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+            </mu-list>
+            <mu-divider/>
+            <mu-list>
+                <mu-sub-header>历史聊天记录</mu-sub-header>
+                <mu-list-item title="聊天室6">
+                    <mu-avatar src="./static/img/6.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+                <mu-list-item title="聊天室7">
+                    <mu-avatar src="./static/img/7.jpg" slot="leftAvatar"/>
+                    <mu-icon value="chat_bubble" slot="right"/>
+                </mu-list-item>
+            </mu-list>
         </div>
+    </div>
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     import io from 'socket.io-client'
     export default {
         name: 'hello',
@@ -52,8 +52,10 @@
         },
         created() {
             var that = this
-            this.socket = io.connect('localhost:8081')
-            this.socket.on('login', function (obj) {
+            this.$store.commit('setgetsocket', io.connect('localhost:8083/'))
+            // this.socket = io.connect('localhost:8081')
+            this.getsocket.on('login', function (obj) {
+                console.log('member', obj)
                 that.$store.commit('setusers', obj)
             })
             this.$nextTick(function () {
@@ -66,18 +68,25 @@
         computed: {
             ...mapGetters([
                 'getusername',
-                'getusersrc'
+                'getusersrc',
+                'getsocket'
             ])
         },
         methods: {
-            chatwindow() {
+            chatwindow(roomID) {
                 this.$store.commit('changechattoggle')
                 var obj = {
                     name: this.getusername,
-                    src: this.getusersrc
+                    src: this.getusersrc,
+                    roomid: roomID
                 }
-                this.socket.emit('login', obj)
-                this.$store.dispatch('getmesshistory')
+                this.$store.commit('setuserroom', roomID)
+                this.getsocket.emit('login', obj)
+                var data = {
+                    roomid: roomID
+                }
+                this.$store.dispatch('getmesshistory', data)
+                this.$store.commit('setroomdetailinfos')
             }
         }
     }
diff --git a/src/components/Login.vue b/src/components/Login.vue
index b51f4c1..82198be 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -7,9 +7,11 @@
         </div>
         <div class="content">
             <form action="" name="form2">
-                <mu-text-field label="帐号" labelFloat name="username" /><br/>
-                <mu-text-field label="密码" type="password" labelFloat name="password"/><br/>
-                <mu-raised-button label="登录"  fullWidth @click="submit" primary />
+                <mu-text-field label="帐号" labelFloat name="username"/>
+                <br/>
+                <mu-text-field label="密码" type="password" labelFloat name="password"/>
+                <br/>
+                <mu-raised-button label="登录" fullWidth @click="submit" primary/>
             </form>
             <div @click="register">
                 注册帐号
@@ -19,7 +21,7 @@
 </template>
 
 <script type="text/ecmascript-6">
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     export default{
         data() {
             return {
@@ -36,7 +38,7 @@
                         name: name,
                         password: password
                     }
-    //                this.loading = 'loading'
+                    //                this.loading = 'loading'
                     this.$store.dispatch('loginsubmit', data)
                     document.form2.reset()
                 } else {
@@ -60,24 +62,24 @@
 <style lang="stylus" rel="stylesheet/stylus">
     .login
         position: absolute
-        left:0
-        right:0
-        top:0
-        bottom:0
-        background:#fff
+        left: 0
+        right: 0
+        top: 0
+        bottom: 0
+        background: #fff
         .mu-appbar
             text-align: center
             .mu-flat-button-label
                 font-size: 20px
         .content
-            width:80%
-            margin:20px auto
+            width: 80%
+            margin: 20px auto
             .mu-text-field
-                width:100%
+                width: 100%
             .mu-raised-button
-                min-width:80px
-                display:block
-                width:100%
+                min-width: 80px
+                display: block
+                width: 100%
                 margin: 0 auto
                 transition: all 0.375s
                 &.loading
diff --git a/src/components/Mymsg.vue b/src/components/Mymsg.vue
index 2452db6..f317e0d 100644
--- a/src/components/Mymsg.vue
+++ b/src/components/Mymsg.vue
@@ -1,53 +1,71 @@
 <template>
     <div class="clear">
+
         <div class="item">
-            <img :src="img" alt="">
-            <span>
-            {{msg}}
-        </span>
+            <div class="name">
+                {{name}}
+            </div>
+            <img :src="head" alt="" class="head">
+            <div v-if="img">
+                <img :src="img" alt="" class="img">
+            </div>
+            <span v-if="msg">
+                {{msg}}
+            </span>
         </div>
     </div>
 </template>
 
 <script type="text/ecmascript-6">
 export default{
-    props: ['name', 'img', 'msg']
+    props: ['name', 'img', 'msg', 'head']
 }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-.item
-    position: relative
-    clear: both
-    display: inline-block
-    padding: 16px 40px 16px 20px
-    margin: 10px 10px 20px 10px
-    border-radius: 10px
-    background-color: rgba(25, 147, 147, 0.2)
-    animation: show-chat-odd 0.25s 1 ease-in
-    -moz-animation: show-chat-odd 0.25s 1 ease-in
-    -webkit-animation: show-chat-odd 0.25s 1 ease-in
-    float: right
-    margin-right: 80px
-    color: #0AD5C1
-    span
-        word-break:break-all
-    img
-        position: absolute
-        top: 0
-        width: 50px
-        height: 50px
-        border-radius: 50px
-        right: -70px;
-    &:after
-        position: absolute
-        top: 15px
-        content: ''
-        width: 0
-        height: 0
-        border-top: 15px solid rgba(25, 147, 147, 0.2)
-        border-right: 15px solid transparent
-        right: -15px
+.clear
+    margin-top :10px
+    .item
+        position: relative
+        clear: both
+        display: inline-block
+        padding: 16px 40px 16px 20px
+        margin: 10px 10px 20px 10px
+        border-radius: 10px
+        background-color: rgba(25, 147, 147, 0.2)
+        animation: show-chat-odd 0.25s 1 ease-in
+        -moz-animation: show-chat-odd 0.25s 1 ease-in
+        -webkit-animation: show-chat-odd 0.25s 1 ease-in
+        float: right
+        margin-right: 80px
+        color: #0AD5C1
+        .img
+            max-width: 200px
+        span
+            word-break:break-all
+        .name
+            position: absolute
+            top: -20px
+            width: 50px
+            height: 20px
+            right: -70px;
+            text-align center
+        .head
+            position: absolute
+            top: 0
+            width: 50px
+            height: 50px
+            border-radius: 50px
+            right: -70px;
+        &:after
+            position: absolute
+            top: 15px
+            content: ''
+            width: 0
+            height: 0
+            border-top: 15px solid rgba(25, 147, 147, 0.2)
+            border-right: 15px solid transparent
+            right: -15px
 @keyframes show-chat-odd {
     0% {
         margin-right: -480px;
diff --git a/src/components/Othermsg.vue b/src/components/Othermsg.vue
index d01e3f8..77a7cb9 100644
--- a/src/components/Othermsg.vue
+++ b/src/components/Othermsg.vue
@@ -1,87 +1,106 @@
 <template>
     <div class="clear">
         <div class="item">
-            <img :src="img" alt="">
-            <span>
-            {{msg}}
+            <div class="name">
+                {{name}}
+            </div>
+            <img :src="head" alt="" class="head">
+            <div v-if="img">
+                <img :src="img" alt="" class="img">
+            </div>
+            <span v-if="msg">
+                {{msg}}
             </span>
         </div>
     </div>
 </template>
 
 <script type="text/ecmascript-6">
-export default{
-    props: ['name', 'img', 'msg']
-}
+    export default{
+        props: ['name', 'head', 'msg', 'img']
+    }
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-.item
-    position: relative
-    clear: both
-    display: inline-block
-    padding: 16px 40px 16px 20px
-    margin: 10px 10px 20px 10px
-    border-radius: 10px
-    background-color: rgba(25, 147, 147, 0.2)
-    animation: show-chat-even 0.25s 1 ease-in
-    -moz-animation: show-chat-even 0.25s 1 ease-in
-    -webkit-animation: show-chat-even 0.25s 1 ease-in
-    float: left
-    margin-left: 80px
-    color: #0EC879
-    span
-        word-break:break-all
-    img
-        position: absolute
-        top: 0
-        width: 50px
-        height: 50px
-        border-radius: 50px
-        left: -70px;
-    &:after
-        position: absolute
-        top: 15px
-        content: ''
-        width: 0
-        height: 0
-        border-top: 15px solid rgba(25, 147, 147, 0.2)
-        border-left: 15px solid transparent
-        left: -15px
-@keyframes show-chat-odd {
-    0% {
-        margin-right: -480px;
-    }
+    .clear
+        margin-top: 10px
+        .item
+            position: relative
+            clear: both
+            display: inline-block
+            padding: 16px 40px 16px 20px
+            margin: 10px 10px 20px 10px
+            border-radius: 10px
+            background-color: rgba(25, 147, 147, 0.2)
+            animation: show-chat-even 0.25s 1 ease-in
+            -moz-animation: show-chat-even 0.25s 1 ease-in
+            -webkit-animation: show-chat-even 0.25s 1 ease-in
+            float: left
+            margin-left: 80px
+            color: #0EC879
+            .img
+                max-width: 200px
+            .name
+                position: absolute
+                top: -20px
+                width: 50px
+                height: 20px
+                left: -70px;
+                text-align center
+                overflow: hidden
+                -ms-text-overflow: ellipsis
+                text-overflow: ellipsis
+                white-space: nowrap
+            span
+                word-break: break-all
+            .head
+                position: absolute
+                top: 0
+                width: 50px
+                height: 50px
+                border-radius: 50px
+                left: -70px;
+            &:after
+                position: absolute
+                top: 15px
+                content: ''
+                width: 0
+                height: 0
+                border-top: 15px solid rgba(25, 147, 147, 0.2)
+                border-left: 15px solid transparent
+                left: -15px
 
-    100% {
-        margin-right: 0;
-    }
-}
-@keyframes show-chat-even {
-    0% {
-        margin-left: -480px;
-    }
+        @keyframes show-chat-odd {
+            0% {
+                margin-right: -480px;
+            }
 
-    100% {
-        margin-left: 0;
-    }
-}
-@-moz-keyframes show-chat-even {
-    0% {
-        margin-left: -480px;
-    }
+            100% {
+                margin-right: 0;
+            }
+        } @keyframes show-chat-even {
+              0% {
+                  margin-left: -480px;
+              }
 
-    100% {
-        margin-left: 0;
-    }
-}
-@-webkit-keyframes show-chat-even {
-    0% {
-        margin-left: -480px;
-    }
+              100% {
+                  margin-left: 0;
+              }
+          } @-moz-keyframes show-chat-even {
+                0% {
+                    margin-left: -480px;
+                }
 
-    100% {
-        margin-left: 0;
-    }
-}
+                100% {
+                    margin-left: 0;
+                }
+            } @-webkit-keyframes show-chat-even {
+                  0% {
+                      margin-left: -480px;
+                  }
+
+                  100% {
+                      margin-left: 0;
+                  }
+              }
 </style>
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 7d74190..0d41bd3 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -7,9 +7,11 @@
         </div>
         <div class="content">
             <form action="" name="form1">
-                <mu-text-field label="帐号" labelFloat name="username" /><br/>
-                <mu-text-field label="密码" type="password" labelFloat name="password"/><br/>
-                <mu-raised-button label="注册" fullWidth @click="submit" primary />
+                <mu-text-field label="帐号" labelFloat name="username"/>
+                <br/>
+                <mu-text-field label="密码" type="password" labelFloat name="password"/>
+                <br/>
+                <mu-raised-button label="注册" fullWidth @click="submit" primary/>
             </form>
             <div @click="login">
                 我已有帐号
@@ -19,7 +21,7 @@
 </template>
 
 <script type="text/ecmascript-6" scoped>
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     export default {
         methods: {
             submit() {
@@ -52,20 +54,20 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-.register
-    position: absolute
-    left:0
-    right:0
-    top:0
-    bottom:0
-    background:#fff
-    .mu-appbar
-        text-align: center
-        .mu-flat-button-label
-            font-size: 20px
-    .content
-        width:80%
-        margin:20px auto
-        .mu-text-field
-            width:100%
+    .register
+        position: absolute
+        left: 0
+        right: 0
+        top: 0
+        bottom: 0
+        background: #fff
+        .mu-appbar
+            text-align: center
+            .mu-flat-button-label
+                font-size: 20px
+        .content
+            width: 80%
+            margin: 20px auto
+            .mu-text-field
+                width: 100%
 </style>
diff --git a/src/components/Robot.vue b/src/components/Robot.vue
index 0100c6c..d72373b 100644
--- a/src/components/Robot.vue
+++ b/src/components/Robot.vue
@@ -1,8 +1,8 @@
 <template>
     <div>
         <div v-for="obj in getrobotmsg">
-            <othermsg v-if="obj.user!=getusername" :name="obj.user" img="./static/img/robot.jpg" :msg="obj.message"></othermsg>
-            <mymsg v-if="obj.user==getusername" :name="getusername" :img="getusersrc" :msg="obj.message"></mymsg>
+            <othermsg v-if="obj.user!=getusername" :name="obj.user" head="./static/img/robot.jpg" :msg="obj.message"></othermsg>
+            <mymsg v-if="obj.user==getusername" :name="getusername" :head="getusersrc" :msg="obj.message"></mymsg>
         </div>
         <div style="height:250px"></div>
         <div class="con-input">
diff --git a/src/store/index.js b/src/store/index.js
index 13ee9ac..dbb279a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,14 +4,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
+// import qs from 'qs'
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
     // 存放用户
+    socket: '',
     user: {
       name: '',
-      src: ''
+      src: '',
+      room: ''
     },
     // 存放历史记录
     messhistory: {
@@ -36,10 +39,11 @@ const store = new Vuex.Store({
     registertoggle: true,
     // 提示框显示控制
     dialog: false,
-     // 提示框内容
+    // 提示框内容
     dialoginfo: ''
   },
   getters: {
+    getsocket: state => state.socket,
     getid: state => state.roomdetail.id,
     getusers: state => state.roomdetail.users,
     getinfos: state => state.roomdetail.infos,
@@ -50,10 +54,14 @@ const store = new Vuex.Store({
     getdialoginfo: state => state.dialoginfo,
     getusername: state => state.user.name,
     getusersrc: state => state.user.src,
+    getuserroom: state => state.user.room,
     getmesshistoryinfos: state => state.messhistory.infos,
     getrobotmsg: state => state.robotmsg
   },
   mutations: {
+    setgetsocket (state, data) {
+      state.socket = data
+    },
     changechattoggle(state) {
       state.chattoggle = !state.chattoggle
     },
@@ -81,9 +89,15 @@ const store = new Vuex.Store({
     setusersrc(state, data) {
       state.user.src = data
     },
+    setuserroom(state, data) {
+      state.user.room = data
+    },
     addroomdetailinfos(state, data) {
       state.roomdetail.infos.push(data)
     },
+    setroomdetailinfos(state) {
+      state.roomdetail.infos = []
+    },
     setusers(state, data) {
       state.roomdetail.users = data
     },
@@ -95,6 +109,20 @@ const store = new Vuex.Store({
     }
   },
   actions: {
+    uploadimg({commit}, data) {
+      var config = {
+        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
+      }
+      axios.post('/file/uploadimg', data, config)
+        .then(function (data) {
+          if (data.data.errno === 0) {
+            console.log('上传成功')
+          }
+        })
+        .catch(function (err) {
+          console.log(err)
+        })
+    },
     registersubmit({commit}, data) {
       console.log(data)
       axios.post('/user/signup', data)
@@ -131,8 +159,8 @@ const store = new Vuex.Store({
           console.log(err)
         })
     },
-    getmesshistory({commit}) {
-      axios.get('/message')
+    getmesshistory({commit}, data) {
+      axios.get('/message', {params: data})
         .then(function (data) {
           commit('setmesshistoryinfos', data.data.data)
         })