2024年Web前端最全websocket实现简单聊天程序_若依聊天室(1),前端开发面试题目
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-xBpwogtH-1714835645986)]
·
专业技能
一般来说,面试官会根据你的简历内容去提问,但是技术基础还有需要自己去准备分类,形成自己的知识体系的。简单列一下我自己遇到的一些题
- HTML+CSS
- JavaScript
- 前端框架
- 前端性能优化
- 前端监控
- 模块化+项目构建
- 代码管理
- 信息安全
- 网络协议
- 浏览器
- 算法与数据结构
- 团队管理
- 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最近得空把之前遇到的面试题做了一个整理,包括我本人自己去面试遇到的,还有其他人员去面试遇到的,还有网上刷到的,我都统一的整理了一下,希望对大家有用。
其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等
由于文章篇幅有限,仅展示部分内容
主要代码:
服务端 app.js
先加载所需要的通信模块:
var express = require('express');
var app = express();
var http = require('http').createServer(app);
var io = require('socket.io').listen(http);
var fs = require('fs');
创建用户列表和消息列表:
var person = [];
var history = [];
绑定并监听80端口:
app.get('/',function (req,res) {
res.sendFile(__dirname + '/login.html');
});
http.listen(80,function () {
console.log('listening on *:80');
});
客户端连接成功后,触发响应事件connection,完成要绑定的事件并实现客户端出发的事件:
io.sockets.on('connection',function (socket) {
var user = '';
socket.emit('history', history);
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);
连接成功后,对用户昵称输入的验证:
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
里就结束了,如果觉得对你有帮助可以点个赞哦**
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-xBpwogtH-1714835645986)]
更多推荐
已为社区贡献1条内容
所有评论(0)