vue+websocket+nodejs实现聊天室 -一对多、一对一聊天_单聊和群聊 vue_websocket + vue的1对1聊天案例

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

                nickname: obj.nickname,
                uid: obj.uid,
                msg: obj.msg,
                users,
                date: moment().format('YYYY-MM-DD HH:mm:ss'),
                brige: obj.brige
            })
            break;
    }
  1
  2
  3
  4
  5
  6
  7
  8
  9

  })

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

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

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

**客户端：**


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



1
2
3
4
5
6
7
8

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



1
2
3
4
5
6

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 = '群聊'
},
1
2
3
4
5
6
7
8
9
10
11

**样式层：**



1
2
3
4
5

.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%;
    height: 540px;
    overflow-y: auto;
    .join-tips {
      position: relative!important;
      display: block;
      width: 100%;
      left: 0!important;
      transform: none!important;
      color: #cccccc;
      font-size: 15px;
      text-align: center;
    }
    .li {
      position: relative;
      margin-bottom: 15px;
      text-align: left;
      color: #46b0ff;
      &:after {
        content: '';
        display: block;
        clear: both;
      }
      .message-date {
        font-size: 16px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-mONuZvtl-1715828994549)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】