05----3小时 用 websocket 实现聊天室 之在聊天室里广播告诉所有人该有的消息

//广播告诉所有人 有人进来了

io.emit(“addUser”,data);

1.2客户端(index.js)

// 监听添加用户的消息

socket.on(‘addUser’, data => {

// 添加一条系统消息

$(‘.box-bd’).append(`

${data.username}加入了群聊

`)

scrollIntoView();//该方法用于使聊天记录可以上下移动（这样就不会只能看到一页的聊天记录）

})

2.把新进来的用户的信息添加到用户列表中

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

2.1服务端（app.js）

//把所有用户列表重新渲染出来

io.emit(“userList”,users);

2.2客户端（index.js）

// 监听用户列表的消息

socket.on(‘userList’, data => {

// 把userList中的数据动态渲染到左侧菜单

$(‘.user-list ul’).html(‘’)

data.forEach(item => {

$(‘.user-list ul’).append(`

• 
  ${item.username}

  `)

  })

  $(‘#userCount’).text(data.length)

  })

  当有用户离开时广播告诉所有人 有某某某离开

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

  服务端（app.js）

  //把用户信息存到socket中，方便退出时，告诉大家(这一步时在登录时做的)

  socket.username=data.username;

  socket.avatar=data.avatar;

  **

  到这里需要解释下说明socket 和 io 的区别，io 是广播给所有用户的，而socket 是属于该登录的用户自己拥有的

  当socket.emit（）的时候也是把信息只发送给该用户

  所以你会发现在客户端，接受的方式都是socket.on();

  //当用户退出聊天室时

  socket.on(‘disconnect’,function () {

  console.log(“关闭”);

  let index = users.findIndex(item=>item.username===socket.username);

  users.splice(index,1);

  //告诉大家有人退出了聊天室

  io.emit(“delUser”,{

  username:socket.username,

  avatar:socket.avatar

  })

  判断

  回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

  第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

  第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

  前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

  总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  

  

  看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  [外链图片转存中…(img-3e9sK8Jk-1726119443533)]

  [外链图片转存中…(img-jUijakRy-1726119443534)]