2024年Web前端最全Nodejs + WebSocket + Vue 实现多人聊天室- 第二章(1)，888道前端高级面试题

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS
• JavaScript
• 前端框架
• 前端性能优化
• 前端监控
• 模块化+项目构建
• 代码管理
• 信息安全
• 网络协议
• 浏览器
• 算法与数据结构
• 团队管理
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

cd web-im

npm install

这就是整个生成后的项目结构。

WebSocket服务端

在项目根目录下新建server/index.js文件。

这就是整个生成后的项目结构。

WebSocket服务端

在项目根目录下新建server/index.js文件。

var ws = require(“nodejs-websocket”);

// 这里用到了moment，请大家自行安装

var moment = require(‘moment’);

console.log(“开始建立连接…”)

let users = [];

// 向所有连接的客户端广播

function boardcast(obj) {

server.connections.forEach(function(conn) {

conn.sendText(JSON.stringify(obj));

})

}

function getDate(){

return moment().format(‘YYYY-MM-DD HH:mm:ss’)

}

var server = ws.createServer(function(conn){

conn.on(“text”, function (obj) {

obj = JSON.parse(obj);

if(obj.type===1){

users.push({

nickname: obj.nickname,

uid: obj.uid

});

boardcast({

type: 1,

date: getDate(),

msg: obj.nickname+‘加入聊天室’,

users: users,

uid: obj.uid,

nickname: obj.nickname

});

} else {

boardcast({

type: 2,

date: getDate(),

msg: obj.msg,

uid: obj.uid,

nickname: obj.nickname

});

}

})

conn.on(“close”, function (code, reason) {

console.log(“关闭连接”)

});

conn.on(“error”, function (code, reason) {

console.log(“异常关闭”)

});

}).listen(8001)

console.log(“WebSocket建立完毕”)

这里和《 WebSocket简绍- 第一章》大体结构相同，不同的是，这里向客户端发送消息是用的一个方法

server.connections.forEach(function(conn) {

conn.sendText(JSON.stringify(obj));

})

遍历所有连接，发送信息。

这里为什么要JSON.stringify(obj)转换成字符串？？？

那是sendText方法只能传入字符串，所以我们需要将我们的对象转换一下。

同时，大家应该可以看出，在conn.on("text", ()=>{})的时候判断了一个从客户端传入的type，这个操作是判断用户是否是第一次进入。

WebSocket客户端视图层

<c-dialog

ref=“loginDialog”

title=‘请输入你的昵称’

confirmBtn=“开始聊天”

@confirm=“login”

聊天室

{{item.msg}}

{{item.nickname}}

{{item.msg}}

<button @click=“send”>发送

样式方面就不做解释了，都是非常简单的样式，有兴趣的可以点击最下方获取源码查看。

WebSocket客户端

export default {

data(){

return {

uid: ‘’,

nickname: ‘’,

socket: ‘’,

msg: ‘’,

messageList: []

}

},

mounted() {

let vm = this;

let user = localStorage.getItem(‘WEB_IM_USER’);

user = user && JSON.parse(user) || {};

vm.uid = user.uid;

vm.nickname = user.nickname;

if(!vm.uid){

vm.$refs.loginDialog.show()

} else {

vm.conWebSocket();

}

document.onkeydown = function (event) {

var e = event || window.event;

if (e && e.keyCode == 13) { //回车键的键值为13

vm.send()

}

}

},

methods: {

send(){

最后

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

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

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

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

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

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