2024年前端最新websocket实现简单聊天程序_若依聊天室(4)，2024年最新Web前端中高级面试必知必会

文末

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

    user = data;
    person.push(user);
    io.sockets.emit('loginsucess');
    io.sockets.emit('updatePerson', person);
    io.sockets.emit('news', {content: user + '进入房间', time: now(), name: '系统消息'});
});

socket.on('disconnect', function () {
    if (user !== '') {
        person.forEach(function (value, index) {
            if (value === user) {
                person.splice(index, 1);
            }
        });
        io.sockets.emit('news', {content: user + '离开房间', time: now(), name: '系统消息'});
        io.sockets.emit('updatePerson', person);
    }
});

});

#### 客户端 index.js：


先初始化用户信息：

$scope.data = []; //消息队列
$scope.name = ‘’; //用户名
$scope.content = ‘’; //用户输入的消息
$scope.personlist = []; //用户队列

然后连接服务器端：

const socket_url = ‘http://localhost’;
var socket = io.connect(socket_url);

连接成功后，对用户昵称输入的验证：

KaTeX parse error: Expected '}', got 'EOF' at end of input: …on () { if(scope.name!==‘’){
if(KaTeX parse error: Expected '}', got 'EOF' at end of input: … if(scope.personlist.indexOf($scope.name)>-1) {
document.getElementById(“info”).textContent = “该昵称已被占用，请重新输入”;
}
else{
socket.emit(‘setUserName’, $scope.name);
}
}
else{
socket.emit(‘setUserName’, $scope.name);
}
}
else{
document.getElementById(‘name’).focus();
}
};

验证成功后，对用户输入消息要触发的事件：

$scope.sendMsg = function(data){
var date = new Date();
data = $scope.content;if($scope.content !== ‘’){
socket.emit(‘sendMsg’,data);
}
$scope.content = ‘’;
};

##### 程序的部分运行测试结果：


浏览器输入localhost后展示的用户登录界面:


![这里写图片描述](https://img-blog.csdn.net/20170912165715344?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZndqOTE2ODg5Njcy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)


昵称重复后的提示：   
 ![这里写图片描述](https://img-blog.csdn.net/20170912165745463?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZndqOTE2ODg5Njcy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)


昵称输入成功后进入当前用户的聊天界面：   
 ![这里写图片描述](https://img-blog.csdn.net/20170912165811066?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZndqOTE2ODg5Njcy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)


源码地址：[GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)


#### 参考学习：


[Node.js + Web Socket 打造即时聊天程序嗨聊](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)   
 [基于websocket的一个简单的聊天室](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)








###  最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。