修改socket连接

.env

@@ -1,3 +1,3 @@
 #本地开发环境
 NODE_ENV=production
-VUE_APP_API_URL=http://localhost:3000
+VUE_APP_API_URL=http://192.168.100.8:3000

config/dev.env.js

@@ -4,5 +4,5 @@ const prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  API_URL: '"http://localhost:3000"' // 后台地址
+  API_URL: '"http://192.168.100.8:3000"' // 后台地址
 })

src/api/http.js

@@ -5,7 +5,9 @@ import cookie from 'js-cookie';
 
 // 进行一些全局配置
 // 公共路由(网络请求地址)
-axios.defaults.baseURL = process.env.API_URL;
+// axios.defaults.baseURL = process.env.API_URL;
+// axios.defaults.baseURL = 'http://192.168.100.8:3000'; 
+axios.defaults.baseURL = 'http://127.0.0.1:3000/'; // 本地
 // 请求响应超时时间
 axios.defaults.timeout = 5000;
 // 设置请求头
@@ -20,7 +22,7 @@ export default {
         params: data,
         headers:{
           'Content-Type': 'application/x-www-form-urlencoded',
-          'Authorization': token
+          'Authorization': token || ''
         }
       })
         .then(function(response) {
@@ -36,14 +38,37 @@ export default {
       const token = cookie.get('token')
       axios.post(path, data, {
         headers:{
-          'Content-Type': 'application/x-www-form-urlencoded',
-          'Authorization': token
+          'Content-Type': 'application/json',
+          // 'Authorization': token || ''
+        }
+      })
+        .then(function(response) {
+          resolve(response.data);
+        })
+        .catch(function(error) {
+          reject(error);
+        });
+    });
+  },
+  upload: function(path = '', file = {}) {
+    console.log('=============xxxxx==')
+    console.log(`data`, file)
+    let fd = new FormData();
+    fd.append("filename", file);
+    return new Promise(function(resolve, reject) {
+      // const token = cookie.get('token')
+      axios.post(path, fd, {
+        headers:{
+          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundaryUb95bwwxDSCn3mSq',
         }
       })
         .then(function(response) {
+          console.log(`response`, response)
+          console.log('========上传成功=====')
           resolve(response.data);
         })
         .catch(function(error) {
+          console.log(`error upload====`, error)
           reject(error);
         });
     });

src/api/require.js

@@ -3,8 +3,9 @@ import http from './http';
 import urls from './urls'
 
 // 封装各种接口请求
-export default require = {
+export default  {
   test: (params) => http.get(urls.login_url, params),
   login: (params) => http.post(urls.login_url, params),
+  upload_file: (params) => http.post(urls.upload_url, params),
   register: (params) => http.post(urls.register_url, params),
 }

src/api/urls.js

@@ -1,5 +1,6 @@
 export default {
-  login_url: '/login',
+  login_url: '/api/login',
   register_url: '/register',
   test_url: '/test',
+  upload_url: '/api/upload/'
 }

src/components/ChatFrame.vue

@@ -2,9 +2,10 @@
   <div>
     <div class="chat-wrap" v-if="selected">
       <div class="chat-title">
-        {{ selected.name || selected.roomname }}
+        {{ selected.username || selected.name }}
       </div>
       <div class="record-warp">
+        <!-- 私聊 -->
         <el-scrollbar
           v-if="tab === 'friends'"
           style="height: 95%"
@@ -16,7 +17,7 @@
             :key="i"
           >
             <!-- receive msg record -->
-            <div class="record-item" v-if="item.id !== self.id">
+            <div class="record-item" v-if="item.toid === socket.id">
               <div class="avatar">
                 <el-avatar
                   shape="square"
@@ -30,6 +31,7 @@
                   v-if="_isUrl(item.msg)"
                   :href="item.msg"
                   target="_blank"
+                  style="margin-left: 10px; margin-top: 15px;"
                 >
                   {{ item.msg }}
                 </a>
@@ -38,6 +40,7 @@
                   class="message-content-text receive-record-item"
                   v-if="item.type === 'text'"
                   v-html="_parseHtml(item.msg)"
+                  style="margin-left: 10px; margin-top: 15px;"
                 ></div>
                 <!-- 图片 -->
                 <div
@@ -68,7 +71,7 @@
             </div>
 
             <!-- self send msg record -->
-            <div v-if="item.id === self.id" class="record-item send-record">
+            <div v-if="item.toid !== socket.id" class="record-item send-record">
               <!-- 链接 -->
               <a
                 class="message-content-text"
@@ -128,6 +131,8 @@
             </div>
           </div>
         </el-scrollbar>
+
+        <!-- 群聊 -->
         <el-scrollbar
           v-if="tab === 'groups'"
           style="height: 95%"
@@ -139,7 +144,7 @@
             :key="i"
           >
             <!-- receive msg record -->
-            <div class="record-item" v-if="item.id !== self.id">
+            <div class="record-item" v-if="item.id !== socket.id">
               <div class="avatar">
                 <el-avatar
                   shape="square"
@@ -147,8 +152,8 @@
                 ></el-avatar>
               </div>
               <div class="group-record-item">
-                <div class="nickname">
-                  {{ item.nickname }}
+                <div class="username">
+                  {{ item.username }}
                 </div>
                 <!-- 链接 -->
                 <a
@@ -204,7 +209,7 @@
             </div>
 
             <!-- self send msg record -->
-            <div v-if="item.id === self.id" class="record-item send-record">
+            <div v-if="item.id === socket.id" class="record-item send-record">
               <!-- 链接 -->
               <a
                 class="message-content-text"
@@ -322,10 +327,11 @@
 </template>
 
 <script>
-import { addCookie, getCookie } from "@/utils/setCookie.js";
-import { isUrl, parseHtml, processReturn } from "@/utils/common";
+import { isUrl, parseHtml } from "@/utils/common";
 import Emoji from "./Emoji.vue";
+import { mapState, mapActions } from "vuex";
 let emojiData = require('./../assets/emoji/emoji.json')
+import request from '@/api/require'
 export default {
   name: "ChatFrame",
   props: ["selected", "tab"],
@@ -339,29 +345,58 @@ export default {
       inputRange: '',               // 光标
       emojiPath: new Map(),         // emoji表情地址map对象,
       msg: "",
-      friend_record: [],
       friend_record_list: [],
-      room_record: {},
       room_record_list: [],
-      self: null,
       messageType: "",
       uploadProgress: false,
     };
   },
-  computed: {},
+  computed: {
+    ...mapState({
+      self: state => state.app.user
+    }),
+    ...mapState({
+      socket: state => state.chat.socket
+    }),
+    ...mapState({
+      friendRecord: state => state.chat.friendRecord
+    }),
+    ...mapState({
+      roomRecord: state => state.chat.roomRecord
+    }),
+  },
   watch: {
-    selected(n, o) {
-      if (this.friend_record[this.selected.id]) {
-        this.friend_record_list = this.friend_record[this.selected.id];
-      }
-      if (this.room_record[this.selected.id]) {
-        this.room_record_list = this.room_record[this.selected.id];
+    selected(newVal, o) {
+      if (this.tab === 'friends') {
+        console.log('================================================')
+        console.log(`this.friendRecord`, this.friendRecord)
+        console.log(`newVal`, newVal)
+        console.log(`this.friendRecord[newVal.id]`, this.friendRecord[newVal.id])
+        console.log(`this.friendRecord`, this.friendRecord)
+
+        if (this.friendRecord[newVal.id]) {
+          this.friend_record_list = this.friendRecord[newVal.id];
+        } else {
+          this.$store.commit('chat/set_friend_record', [newVal.id])
+          this.friend_record_list = this.friendRecord[newVal.id];
+          console.log(`this.friendRecord`, this.friendRecord)
+        }
+      } else {
+        if (this.roomRecord[newVal.id]) {
+          this.room_record_list = this.roomRecord[newVal.id];
+        } else {
+          this.$store.commit('chat/set_room_record', newVal.id)
+          this.room_record_list = this.roomRecord[newVal.id];
+          console.log(`this.room_record_list[newVal.id]`, this.room_record_list)
+        } 
       }
       this.$nextTick(() => {
+        document.getElementById('charInput').innerText = ''
+        this.msg = ''
         this.$refs["myScrollbar"].wrap.scrollTop =
           this.$refs["myScrollbar"].wrap.scrollHeight;
       });
-    },
+    }
   },
   methods: {
     handleSuccess(res, file) {
@@ -369,8 +404,6 @@ export default {
       this.imageUrl = URL.createObjectURL(file.raw);
     },
     beforeUpload(file) {
-      console.log(`file`, file);
-      console.log(`file.type`, file.type);
       this.uploadProgress = true;
       this.fileData = file;
       //  调用函数分割文件 我这里是分割成不超过20M的文件快
@@ -381,7 +414,14 @@ export default {
       // })
       let fd = new FormData();
       fd.append("filename", file);
-      this.$http.post("/api/upload/", fd).then(
+      // upload_file(fd).then(
+      request.upload_file(file).then(res => {
+        console.log(`res5555`, res)
+      })
+      .catch(err => {
+        console.log(`err`, err)
+      })
+      this.$http.post(this.baseUrl + "api/upload/", fd).then(
         (res) => {
           if (
             file.type === "image/jpeg" ||
@@ -418,10 +458,8 @@ export default {
      * @params text
      */
     _parseHtml(text) {
-      console.log(`text----fffff`, text)
       const regex2 = /!!\[(.+?)\]!!/g;
       const codeList = text.match(regex2)
-      console.log('text.match(regex2)',text.match(regex2))
       let html = text
       if (codeList) {
         codeList.map((item) => {
@@ -433,12 +471,6 @@ export default {
           "' alt='' >")
         })
       }
-      // let html =
-      //   "<img style='width: 20px; height: 20px;vertical-align: sub;' src='" +
-      //   this.getIconPic(code) +
-      //   "' unicode = '" +
-      //   code +
-      //   "' alt='' >";
       return parseHtml(html);
     },
 
@@ -665,64 +697,38 @@ export default {
       } else { // 输入框信息
         this.msg = this.formatInputCon().replace(/<br>/g, '\r\n')
         console.log(`this.msg`, this.msg)
-        console.log(this.msg)
       }
       if (this.msg.trim() === "") {
         this.msg = "";
         return;
       }
-      if (!this.self) {
-        this.self = JSON.parse(localStorage.getItem("self"));
-      }
-      console.log(`this.self`, this.self);
       if (!this.messageType) {
         this.messageType = "text";
       }
       const msgInfo = {
         ...this.self,
+        id: this.socket.id,
         msg: this.msg,
         type: this.messageType,
       };
-      console.log(`msgInfo`, msgInfo);
-      console.log(`this.selected.id`, this.selected);
-      // if (!this.selected) {
-      //   this.$message.error("请先选择聊天对象");
-      //   return;
-      // }
-      // 输入enter后置空
-      console.log(`document.getElementById('charInput')`, document.getElementById('charInput'))
-      document.getElementById('charInput').innerText = ''
-      console.log(`document.getElementById('charInput')`, document.getElementById('charInput'))
-      this.msg = ""; 
-      this.messageType = "";
-      console.log('===========this.tab=========')
-      console.log(this.tab)
       if (this.tab === "friends") {
         msgInfo.toid = this.selected.id;
-        this.$socket.emit("private message", this.selected.id, msgInfo);
-        if (this.friend_record[this.selected.id]) {
-          this.friend_record[this.selected.id].push(msgInfo);
-          this.friend_record_list = this.friend_record[this.selected.id];
-        } else {
-          this.friend_record[this.selected.id] = [];
-          this.friend_record[this.selected.id].push(msgInfo);
-          this.friend_record_list = this.friend_record[this.selected.id];
-        }
-        // addCookie("friend_record", JSON.stringify(this.friend_record));
+        this.socket.emit("private message", this.selected.id, msgInfo);
+        const msgData = [this.selected.id, msgInfo]
+        this.$store.commit('chat/set_friend_record', msgData)
+        this.friend_record_list = this.friendRecord[this.selected.id];
       } else {
-        msgInfo.roomid = this.selected.id;
-        this.$socket.emit("chat-room", this.selected.id, msgInfo);
-        if (this.room_record[this.selected.id]) {
-          this.room_record[this.selected.id].push(msgInfo);
-          this.room_record_list = this.room_record[this.selected.id];
-        } else {
-          this.room_record[this.selected.id] = [];
-          this.room_record[this.selected.id].push(msgInfo);
-          this.room_record_list = this.room_record[this.selected.id];
-        }
-        // addCookie("room_record", JSON.stringify(this.room_record));
+        console.log('=======ROOM CHAT========')
+        msgInfo.roomId = this.selected.id;
+        this.socket.emit("chat-room", this.selected.id, msgInfo);
+        this.$store.commit('chat/set_room_record', msgInfo)
+        this.room_record_list = this.roomRecord[this.selected.id];
       }
       this.$nextTick(() => {
+        // 输入enter后置空
+        document.getElementById('charInput').innerText = ''
+        this.msg = ""; 
+        this.messageType = "";
         // 滚动到底部
         this.$refs["myScrollbar"].wrap.scrollTop =
           this.$refs["myScrollbar"].wrap.scrollHeight;
@@ -735,92 +741,18 @@ export default {
     },
   },
   created() {
-    const self_str = localStorage.getItem("self");
-    const room_record_str = getCookie("room_record");
-    const friend_record_str = getCookie("friend_record");
-    if (self_str) {
-      this.self = JSON.parse(self_str);
-    }
-    if (room_record_str) {
-      this.room_record = JSON.parse(room_record_str);
-    }
-    if (friend_record_str) {
-      this.friend_record = JSON.parse(friend_record_str);
-    }
+    // const room_record_str = getCookie("room_record");
+    // const friend_record_str = getCookie("friend_record");
+    // if (room_record_str) {
+    //   this.room_record = JSON.parse(room_record_str);
+    // }
+    // if (friend_record_str) {
+    //   this.friend_record = JSON.parse(friend_record_str);
+    // }
   },
   mounted () {
     this.initEmojiPic()
   },
-  sockets: {
-    connect() {
-      console.log("===连接成功=========");
-    },
-    // 发送消息
-    toServer(data) {
-      this.$socket.emit("toServer", data);
-    },
-    // 接收消息
-    toClient(data) {
-      console.log(`toclient data`, data);
-    },
-    // 断开链接回调
-    disconnect() {
-      console.log("disconnect：", "已经断开 socket 链接");
-    },
-    // 重新连接
-    reconnect() {
-      // 自动执行，直到链接成功
-      this.$socket.emit("connect");
-    },
-    receiveMsg(data) {
-      console.log(`receiveMsg`, data);
-    },
-    chat(data) {
-      console.log(`private message=================`, data);
-      if (this.friend_record[data[0]]) {
-        this.friend_record[data[0]].push(data[1]);
-      } else {
-        this.friend_record[data[0]] = [];
-        this.friend_record[data[0]].push(data[1]);
-      }
-      if (this.friend_record[this.selected.id]) {
-        this.friend_record_list = this.friend_record[this.selected.id];
-        this.$nextTick(() => {
-          this.$refs["myScrollbar"].wrap.scrollTop =
-            this.$refs["myScrollbar"].wrap.scrollHeight;
-        });
-      }
-      console.log(`this.friend_record`, this.friend_record)
-      console.log(`this.selected.id`, this.selected.id)
-      console.log(`this.friend_record_list`, this.friend_record_list)
-      // addCookie("friend_record", JSON.stringify(this.friend_record));
-    },
-    room_msg(data) {
-      console.log("======room msg===");
-      console.log(`data`, data);
-      if (this.room_record[data.roomid]) {
-        this.room_record[data.roomid].push(data);
-      } else {
-        this.room_record[data.roomid] = [];
-        this.room_record[data.roomid].push(data);
-      }
-      if (this.room_record[this.selected.id]) {
-        this.room_record_list = this.room_record[this.selected.id];
-        this.$nextTick(() => {
-          this.$refs["myScrollbar"].wrap.scrollTop =
-            this.$refs["myScrollbar"].wrap.scrollHeight;
-        });
-      }
-      // addCookie("room_record", JSON.stringify(this.room_record));
-    },
-    user_list(userlist) {
-      console.log(`this.self`, this.self);
-      console.log(`userlist`, userlist);
-    },
-    quit(data) {
-      console.log(`quit == quit`, data);
-    },
-  },
 };
 </script>
 
@@ -853,7 +785,7 @@ export default {
   padding: 8px 12px;
   border-radius: 5px;
 }
-.nickname {
+.username {
   padding: 4px;
   margin-bottom: 2px;
   font-size: 14px;
@@ -898,8 +830,7 @@ export default {
   max-height: 225px;
 }
 .receive-record-item {
-  margin-left: 10px; 
-  margin-top: 15px; 
+  margin: 2px;
   background: #fff
 }
 .input-box {

src/components/ChatList.vue

@@ -6,8 +6,8 @@
           src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"
         ></el-avatar>
       </div>
-      <div class="nickname" v-if="self">
-        {{ self.nickname }}
+      <div class="username" v-if="self">
+        {{ self.username }}
       </div>
     </div>
     <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
@@ -23,8 +23,8 @@
                 src="https://img2.baidu.com/it/u=1077360284,2857506492&fm=26&fmt=auto&gp=0.jpg"
               ></el-avatar>
             </div>
-            <div class="nickname" @click="selected(item)">
-              {{ item.nickname }}
+            <div class="username" @click="selected(item)">
+              {{ item.username }}
             </div>
           </div>
         </div>
@@ -63,7 +63,7 @@
     >
       <div class="create-room-wrap">
         <el-input
-          class="nickname-input"
+          class="username-input"
           type="text"
           placeholder="请输入群聊名"
           v-model="group_name"
@@ -88,6 +88,7 @@
 
 <script>
 import { addCookie, getCookie } from "@/utils/setCookie.js";
+import { mapState, mapActions } from "vuex";
 export default {
   name: "ChatList",
   data() {
@@ -96,15 +97,36 @@ export default {
       selected_id: "",
       dialogVisible: false,
       dialog_title: "创建群聊",
-      self: null,
-      friend_list: [],
-      group_list: [],
+      // self: null,
+      // friend_list: [],
+      // group_list: [],
       group_name: "",
       room_member: []
     };
   },
-  computed: {},
-  watch: {},
+  computed: {
+    ...mapState({
+      socket: state => state.chat.socket
+    }),
+    ...mapState({
+      self: state => state.app.user
+    }),
+    ...mapState({
+      friend_list: state => state.chat.userList
+    }),
+    ...mapState({
+      group_list: state => state.chat.roomList
+    })
+  },
+  watch: {
+    // //监听值改变
+    // friend_list(newVal, oldVal) {
+    //   console.log("改变值：", newVal, "旧值:", oldVal);
+    // },
+    // group_list(newVal, oldVal) {
+    //   console.log("roomlist改变值：", newVal, "旧值:", oldVal);
+    // },
+  },
   methods: {
     handleClick(tab) {
       if (tab.name === "friends") {
@@ -120,11 +142,10 @@ export default {
       this.$emit("selected", item);
     },
     getUserList() {
-      this.$socket.emit("user_list");
+      this.socket.emit("user_list");
     },
     getRoomList() {
-      console.log("=========getroomlist=====");
-      this.$socket.emit("list-room");
+      this.socket.emit("list-room");
     },
     joinRoom() {
       this.dialogVisible = true;
@@ -140,16 +161,11 @@ export default {
       this.dialog_title = "离开群聊";
     },
     create() {
-      const data = {
-        name: this.group_name,
-        id: "room_" + this.$socket.id + Date.now()
-      };
-      // this.$socket.emit("create room", data);
-      this.$socket.emit("create-room", this.group_name);
+      this.socket.emit("create-room", this.group_name);
       this.dialogVisible = false;
     },
     join() {
-      this.$socket.emit("join-room", this.group_name);
+      this.socket.emit("join-room", this.group_name);
       console.log("加入群聊");
       this.getRoomList();
       this.dialogVisible = false;
@@ -160,47 +176,10 @@ export default {
       this.dialogVisible = false;
     }
   },
-  created() {
-    const self_str = localStorage.getItem('self')
-    if (self_str) {
-      this.self = JSON.parse(self_str)
-    }
+  mounted() {
+    // this.friend_list = this.$store.getters['chat/userList']
+    // console.log(`this.friend_list`, this.friend_list)
   },
-  sockets: {
-    user_list(userlist) {
-      console.log(`userlist`, userlist);
-      console.log(`this.$socket.id`, this.$socket.id)
-      // addCookie('userlist', JSON.stringify(userlist))
-      userlist.map(item => {
-        if (item.id !== this.$socket.id) {
-          this.friend_list.push(item);
-        } else {
-          this.self = item;
-        }
-      });
-    },
-    room_name(room) {
-      console.log("=====room_name======");
-      console.log(`room`, room);
-      this.$socket.emit("join-room", room.id);
-    },
-    room_list(roomlist) {
-      console.log(`roomlist`, roomlist);
-      this.group_list = roomlist;
-      // addCookie('roomlist', JSON.stringify(roomlist))
-      console.log("===========");
-    },
-    join_room(data) {
-      console.log(`join_room`, data);
-    },
-    leave_room(data) {
-      console.log(`leave_room`, data);
-    },
-    error(msg) {
-      console.log(`msg`, msg);
-      this.$message.error(msg);
-    }
-  }
 };
 </script>
 
@@ -223,7 +202,7 @@ export default {
 .groups-wrap {
   margin-bottom: 10px;
 }
-.nickname,
+.username,
 .group-name {
   width: 100%;
   margin-left: 5px;

src/components/Login.vue

@@ -10,10 +10,10 @@
   >
     <div class="login-wrap">
       <el-input
-        class="nickname-input"
+        class="username-input"
         type="text"
         placeholder="请输入昵称"
-        v-model="nickname"
+        v-model="username"
         @keyup.enter.native="login"
       />
       <el-input
@@ -28,11 +28,12 @@
 </template>
 
 <script>
+
 export default {
   data() {
     return {
       dialogVisible: false,
-      nickname: "",
+      username: "",
       password: ""
     };
   },
@@ -49,18 +50,44 @@ export default {
       // }
       // console.log(`init===`, this.$socket.id);
     },
-    login() {
-      const apiurl = process.env.API_URL
-      console.log(`apiurl`, apiurl)
+    async login() {
+      // const socket = this.$store.getters['chat/socket']
+      // console.log(`socket`, socket)
+      if (this.username !== "") {
+        const userInfo = {
+          // id: this.$socket.id,
+          username: this.username
+        };
+        await this.$store.dispatch('app/login', userInfo).then((res) => {
+          
+          this.$store.dispatch('chat/connectSocket', res) // 登录成功连接socket.io
+          this.dialogVisible = false;
+        })
+        .catch((err) => {
+          console.log(`err`, err)
+        })
+      }
+      return;
+
+
+
+
+      // this.$store.dispatch('app/login',{nick: 'hihihih'})
+      // this.$store.commit('app/set_user', {test: 'xixixixi'})
+      // const apiurl = process.env.API_URL
+      // console.log(`apiurl`, apiurl)
+      console.log(`this.$socket`, this.$socket)
+      this.$socket.auth.token = '55555df'
       if (this.$socket.id) {
-        if (this.nickname !== "") {
+        if (this.username !== "") {
           const userInfo = {
             id: this.$socket.id,
-            nickname: this.nickname
+            username: this.username
           };
           this.$socket.emit("login", userInfo);
           localStorage.setItem("self", JSON.stringify(userInfo));
           this.$socket.emit("list");
+          this.$socket.emit("join-test-room");
           this.dialogVisible = false;
         }
       } else {
@@ -87,7 +114,7 @@ export default {
   margin: 0 auto;
   text-align: center;
 }
-.login-wrap .nickname-input {
+.login-wrap .username-input {
   margin-bottom: 10px;
 }
 .login-btn {

src/main.js

@@ -17,18 +17,22 @@ import 'viewerjs/dist/viewer.css';
 import axios from 'axios'
 Vue.prototype.$http = axios
 
-const socketOptions = {
-  autoConnect: false,  // 自动连接
-}
 // Vue.use(contextmenu);
 Vue.use(ElementUI);
 Vue.config.productionTip = false
-Vue.use(new VueSocketIO({
-  debug: true,
-  // connection: SocketIO('/', socketOptions), // 使用Socket.IO-client
-  connection: SocketIO('http://127.0.0.1:3000', socketOptions), // 使用Socket.IO-client 本地
-  store
-}))
+
+// const socketOptions = {
+//   autoConnect: false,  // 自动连接
+//   auth: {
+//     token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZGsdaased21pbiIsImlhdCI6MTYzMDQwMTUyNSwiZXhwIjoxNjMyOTkzNTI1fQ.NegWbnbqivS2fgDtkj-hADecnifDwSyOfmDtHAsYahk'
+//   }
+// }
+// Vue.use(new VueSocketIO({
+//   debug: true,
+//   connection: SocketIO('/', socketOptions), // 使用Socket.IO-client
+//   // connection: SocketIO('http://127.0.0.1:3000', socketOptions), // 使用Socket.IO-client 本地
+//   store
+// }))
 Vue.use(Viewer, {
   defaultOptions: {
     navbar: false,

src/store/modules/app/actions.js

@@ -1,11 +1,13 @@
 // import axios from '@/api/axios';
-import require from '@/api/require'
+import request from '@/api/require'
+import Vue from 'vue';
 import { processReturn } from '@/utils/common';
 import { SET_USER, SET_TOKEN, SET_LOADING } from './mutation-types';
+
 const actions = {
   async register({ commit }, payload) {
     commit(SET_LOADING, true);
-    const res = await require.register({...payload})
+    const res = await request.register({...payload})
     const data = processReturn(res);
     commit(SET_LOADING, false);
     if (data) {
@@ -14,13 +16,16 @@ const actions = {
       return data;
     }
   },
-  async login({ commit }, payload) {
+  async login({ commit, state }, payload) {
+    console.log('============调用了login---------')
+
     commit(SET_LOADING, true);
-    const res = await require.login({...payload});
+    const res = await request.login({...payload});
+    
     const data = processReturn(res);
     commit(SET_LOADING, false);
     if (data) {
-      commit(SET_USER, data.user);
+      commit(SET_USER, data);
       commit(SET_TOKEN, data.token);
       return data;
     }

src/store/modules/app/mutations.js

@@ -3,6 +3,8 @@ import { SET_USER, CLEAR_USER, SET_TOKEN, SET_MOBILE, SET_BACKGROUND, SET_ACTIVE
 
 const mutations = {
   [SET_USER](state, payload) {
+    console.log('========set_user=======')
+    console.log(`payloadasd`, payload)
     state.user = payload;
     // 数据持久化
     cookie.set('user', payload, { expires: 3650 });

src/store/modules/chat/actions.js

@@ -5,6 +5,7 @@ import localforage from 'localforage';
 import { SET_LOADING, CLEAR_USER } from '../app/mutation-types';
 import {
   SET_SOCKET,
+  SET_USER_LIST,
   SET_DROPPED,
   ADD_GROUP_MESSAGE,
   ADD_FRIEND_MESSAGE,
@@ -18,20 +19,24 @@ import {
   ADD_UNREAD_GATHER,
   REVOKE_MESSAGE,
   USER_ONLINE,
-  USER_OFFLINE,
   ADD_GROUP_MEMBER,
   UPDATE_USER_INFO,
+  SET_FRIEND_RECORD,
+  SET_ROOM_RECORD
 } from './mutation-types';
 
 const actions = {
   // 初始化socket连接和监听socket事件
-  async connectSocket({ commit, state, dispatch, rootState }) {
+  async connectSocket({ commit, state, dispatch, rootState }, payload) {
     const { user, token } = rootState.app;
-    const socket = io.connect(`ws://${process.env.VUE_APP_API_URL.split('http://')[1]}`, {
+    console.log(`payloadddd`, payload)
+    // const socket = io.connect('/', {
+    const socket = io.connect('http://127.0.0.1:3000', { // 本地
+      
       reconnection: true,
-      query: {
-        token,
-        userId: user.userId,
+      auth: {
+        token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImlhdCI6MTYyOTk2MTE2NywiZXhwIjoxNjMyNTUzMTY3fQ.JfitLCzjEwjBL-EY0wqcjFj4F-VnOas_VU60kSZdAVU',
+        // userId: user.userId,
       },
     });
     // token校验,失败则要求重新登录
@@ -47,11 +52,78 @@ const actions = {
     socket.on('connect', async () => {
       console.log('连接成功');
       // 获取聊天室所需所有信息
-      socket.emit('chatData', token);
-
+      console.log(`user`, user)
+      socket.emit("login", user);
+      // socket.emit('chatData', token);
+      socket.emit("list"); // 获取列表
       // 先保存好socket对象
       commit(SET_SOCKET, socket);
     });
+
+    // =========================================================
+    // 用户列表
+    socket.on('user_list', (data) => {
+      const user_list = []
+      data.map(item => {
+        if (item.id !== socket.id) {
+          user_list.push(item);
+        }
+      });
+      Vue.set(state,'userList',user_list)
+      console.log(`state`, state)
+      // commit(SET_USER_LIST, user_list);
+    });
+    // 创建房间 == 加入房间
+    socket.on('room_name', (data) => {
+      console.log('room_name', data);
+      socket.emit("join-room", data.id); // 创建后加入群聊
+      socket.emit("list-room"); // 获取房间列表更新
+    });
+
+    // 房间列表
+    socket.on('room_list', (data) => {
+      console.log('room_list', data);
+      Vue.set(state,'roomList', data)
+      // commit(SET_ROOM_LIST, data);
+    });
+
+    // 其他人加入房间提示
+    socket.on('join_room', (msg) => {
+      console.log('join_room', msg);
+      // 此处应追加 更新房间信息
+    });
+
+    // 退出房间
+    socket.on('leave_room', (msg) => {
+      console.log('leave_room', msg);
+    });
+
+    // 私聊
+    socket.on('chat', (id, data) => {
+      console.log(`private message==a===============`, id, data);
+      console.log(`data`, data)
+      const payload = [id, data]
+      commit(SET_FRIEND_RECORD, payload);
+    });
+
+    // 群聊
+    socket.on('room_msg', (data) => {
+      console.log('room_msg', data);
+      commit(SET_ROOM_RECORD, data);
+    });
+
+    // 其他人退出群聊提示
+    socket.on('quit', (data) => {
+      console.log('quit=========', data);
+    });
+
+    // socktio错误提示
+    socket.on('error', (msg) => {
+      console.log('error', msg);
+    });
+    
+    // =========================================================
+
     // 用户上线
     socket.on('userOnline', (data) => {
       console.log('userOnline', data);

src/store/modules/chat/mutation-types.js

@@ -15,7 +15,12 @@ export const DEL_FRIEND = 'del_friend';
 export const ADD_UNREAD_GATHER = 'set_unread_gather';
 export const LOSE_UNREAD_GATHER = 'lose_unread_gather';
 export const REVOKE_MESSAGE = 'revoke_message';
+export const SET_USER_LIST = 'set_user_list';
+export const SET_ROOM_LIST = 'set_room_list';
+export const SET_FRIEND_RECORD = 'set_friend_record';
+export const SET_ROOM_RECORD = 'set_room_record';
 export const USER_ONLINE = 'user_online';
 export const USER_OFFLINE = 'user_offline';
+export const USER_LIST = 'user_list';
 export const ADD_GROUP_MEMBER = 'add_group_member';
 export const UPDATE_USER_INFO = 'update_user_info';

src/store/modules/chat/mutations.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import { MutationTree } from 'vuex';
 import {
   SET_SOCKET,
   SET_DROPPED,
@@ -18,6 +17,10 @@ import {
   ADD_UNREAD_GATHER,
   LOSE_UNREAD_GATHER,
   REVOKE_MESSAGE,
+  SET_USER_LIST,
+  SET_ROOM_LIST,
+  SET_FRIEND_RECORD,
+  SET_ROOM_RECORD,
   USER_ONLINE,
   USER_OFFLINE,
   UPDATE_USER_INFO,
@@ -26,9 +29,56 @@ import {
 const mutations = {
   // 保存socket
   [SET_SOCKET](state, payload) {
+    console.log('======保存socket==')
+    console.log(`payload`, payload)
     state.socket = payload;
   },
 
+  // ---------------------------------------
+
+  // 保存用户列表
+  [SET_USER_LIST](state, payload) {
+    state.userList = payload;
+  },
+
+  // 保存房间列表
+  [SET_ROOM_LIST](state, payload) {
+    state.roomList = payload;
+  },
+  // 更新私聊记录
+  [SET_FRIEND_RECORD](state, payload) {
+    if (!payload[1] && !state.friendRecord[payload[0]]) {
+      state.friendRecord[payload[0]] = [];
+      console.log('==========set []')
+      console.log(`payload`, payload)
+      return;
+    }
+    if (state.friendRecord[payload[0]]) {
+      state.friendRecord[payload[0]].push(payload[1]);
+    } else {
+      state.friendRecord[payload[0]] = [];
+      state.friendRecord[payload[0]].push(payload[1]);
+    }
+    // Vue.set(state.friendRecord, payload[0], state.friendRecord[payload[0]])
+  },
+  // 更新群聊记录
+  [SET_ROOM_RECORD](state, payload) {
+    if (!payload.roomId && !state.roomRecord[payload]) {
+      state.roomRecord[payload] = [];
+      return;
+    }
+    // state.roomList = payload;
+    if (state.roomRecord[payload.roomId]) {
+      state.roomRecord[payload.roomId].push(payload);
+    } else {
+      state.roomRecord[payload.roomId] = [];
+      state.roomRecord[payload.roomId].push(payload);
+    }
+    // Vue.set(state.roomRecord, payload.roomId, state.roomRecord[payload.roomId])
+  },
+
+  // ---------------------------------------
+
   // 设置用户是否处于掉线重连状态
   [SET_DROPPED](state, payload) {
     state.dropped = payload;

src/store/modules/chat/state.js

@@ -4,6 +4,10 @@ const chatState = {
   activeRoom: null, // 当前访问房间
   groupGather: {}, // 群组列表
   userGather: {}, // 设置群在线用户列表
+  userList: {}, // 用户列表
+  roomList: {}, // 群聊列表
+  friendRecord: {}, // 私聊记录
+  roomRecord: {}, // 群聊记录
   friendGather: {}, // 好友列表
   unReadGather: {}, // 所有会话未读消息集合
 };

src/utils/common.js

@@ -2,14 +2,18 @@ import Vue from 'vue';
 
 // 处理所有后端返回的数据
 export function processReturn(res) {
+  console.log(`res ===return lll`, res)
   // code 0:成功 1:错误 2:后端报错
-  const { code, msg, data } = res.data;
+  const { code, msg, data } = res;
   if (code) {
-    Vue.prototype.$message.error(msg);
+    Vue.prototype.$message.error('错了哦，这是一条错误消息');
     return;
   }
   if (msg) {
-    Vue.prototype.$message.success(msg);
+    Vue.prototype.$message({
+      message: msg,
+      type: 'success'
+    })
   }
   return data;
 }

src/views/index.vue

@@ -46,7 +46,7 @@ export default {
     }
   },
   mounted() {
-    this.$socket.open();
+    // this.$socket.open();
   }
 };
 </script>