vue+websocket+nodejs实现聊天室 -一对多、一对一聊天_单聊和群聊 vue(1)

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

            // 不存在uid对应的用户（不是本人），才会添加，避免重复
            const isSelf = users.some(m => m.uid === obj.uid)
            console.log(isSelf, data.uid, users, '所有用户')
            if (!isSelf) {
                users.push({
                    nickname: obj.nickname,
                    uid: obj.uid
                })
            }
            broadcast({
                type: 1,
                nickname: obj.nickname,
                uid: obj.uid,
                msg: `${obj.nickname}进入了聊天室`,
                date: moment().format('YYYY-MM-DD HH:mm:ss'),
                users,
                brige: obj.brige
            })
        }
        break;
    case 2:
        // 聊天时候不需要users，type为1已经处理了
        broadcast({
            type: 2,
            nickname: obj.nickname,
            uid: obj.uid,
            msg: obj.msg,
            users,
            date: moment().format('YYYY-MM-DD HH:mm:ss'),
            brige: obj.brige
        })
        break;
}

})

conn.on(‘close’, function (e) {
console.log(e, ‘服务端连接关闭’)
})

conn.on(‘error’, function (e) {
console.log(e, ‘服务端异常’)
})

}).listen(8888)
console.log(‘服务端已开启’)


**客户端：**


**视图层：**（由之前的class为right改为现在web-im。多加了左侧菜单栏，其他地方跟上篇一致）


**逻辑层：**（之前是聊天框数组是messageList，现在改成currentMessage）  
 (注：…表示代码跟之前一致，这里不再多写)

computed: {
// 筛选当前brige一致的放到一个聊天数组里，区分单聊和群聊
currentMessage () {
const vm = this
let data = this.messageList.filter(item => {
return item.brige.sort().join(‘’) === vm.brige.sort().join(‘’)
})
return data
}
},

…

// 发送信息给客户端
sendMessage (type, msg) {
const data = {
uid: this.uid,
type,
nickname: this.nickname,
msg,
users: this.users,
brige: this.brige
}
this.ws.send(JSON.stringify(data))
this.msg = ‘’
},

// 切换到单聊
triggerUser (itm) {
  this.brige = [this.uid, itm.uid]
  this.title = `和${itm.nickname}聊天`
},

// 切换到群聊
triggerGroup () {
  this.brige = []
  this.title = '群聊'
},


**样式层：**

.web-im {
display: flex;
}
.left {
width: 200px;
border: 1px solid #ccc;
.user {
width: 100%;
height: 36px;
padding-left: 10px;
border-bottom: 1px solid #ccc;
line-height: 36px;
.msgtip {
display: inline-block;
width: 20px;
height: 20px;
background: #46b0ff;
margin-left: 5px;
text-align: center;
color: #fff;
line-height: 20px;
border-radius: 50%;
}
}
}
.right {
position: relative;
flex: 1;
height: 600px;
margin: 0 auto;
.im-title {
height: 30px;
padding-left: 20px;
border-bottom: 1px solid #ccc;
line-height: 30px;
font-size: 16px;
}
.im-footer {
position: absolute;
bottom: 0;
left: 0;
display: flex;
width: 100%;
.im-footer_inp {
width: 80%;
}
.im-footer_btn {
width: 20%;
}
}

  .im-record {
    width: 100%;

总结:

函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；
它提倡着纯函数 / 函数复合 / 数据不可变，谨慎对待函数内的状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

vue+websocket+nodejs实现聊天室 -一对多、一对一聊天_单聊和群聊 vue(1)

总结

悦读