2024年Web前端最全websocket实现简单聊天程序_若依聊天室(2)，2024年最新程序员面试100题

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

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

io.sockets.emit('updatePerson', person); 

socket.on('sendMsg', function (data) {
    var obj = {};
    obj.content = data;
    obj.time = now();
    obj.name = user;
    if (history.length === history_num) {
        history.shift();
    }
    history.push(obj);
    io.sockets.emit('news', obj);
});

socket.on('setUserName', function (data) {
    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)



### 前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。



以 Vue 为例，我整理了如下的面试题。

![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)


**[如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**