首页 前端知识 Web前端最新用 websocket、JQuery开发仿微信聊天,被裁半年考入编制内月薪6K

Web前端最新用 websocket、JQuery开发仿微信聊天,被裁半年考入编制内月薪6K

2024-05-12 17:05:34 前端知识 前端哥 738 543 我要收藏

文末

逆水行舟不进则退,所以大家要有危机意识。

同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

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

前端面试题汇总

聊天室(99)

按下Ctrl+Enter发送

发送

css


  • {

margin: 0;

padding: 0;

list-style: none;

}

html,

body {

height: 100%;

}

body {

background: url(‘…/images/bg.jpg’) no-repeat center center;

background-size: cover;

}

.container {

max-width: 1000px;

min-width: 800px;

height: 100%;

margin: 0 auto;

background-color: pink;

}

.user-list {

width: 280px;

height: 100%;

float: left;

position: relative;

background-color: #2e3238;

}

.box {

overflow: hidden;

height: 100%;

background-color: #eee;

position: relative;

}

.box-hd {

text-align: center;

position: absolute;

top: 0;

left: 0;

width: 100%;

line-height: 30px;

}

.box-hd h3 {

font-size: 18px;

font-weight: 400;

padding: 10px 0;

margin: 0 20px;

border-bottom: 1px solid #ccc;

z-index: 999;

box-sizing: border-box;

}

.message-box {

overflow: hidden;

}

.box-bd {

position: absolute;

width: 100%;

bottom: 180px;

top: 51px;

overflow-y: auto;

overflow-x: hidden;

}

.system {

overflow: hidden;

}

.message_system {

text-align: center;

margin: 10px auto;

max-width: 50%;

}

.message_system .content {

display: inline-block;

font-size: 12px;

padding: 1px 18px;

color: #b2b2b2;

border-radius: 2px;

}

.other {

margin-bottom: 16px;

float: left;

width: 100%;

padding-left: 20px;

box-sizing: border-box;

}

.my {

margin-bottom: 16px;

float: right;

width: 100%;

text-align: right;

padding-right: 20px;

box-sizing: border-box;

}

.my.message .avatar {

float: right;

}

.message .content {

overflow: hidden;

}

.message .content .nickname {

font-weight: 400;

padding-left: 10px;

font-size: 12px;

height: 22px;

line-height: 24px;

color: #4f4f4f;

width: 350px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

}

.message .avatar {

width: 40px;

height: 40px;

border-radius: 2px;

float: left;

cursor: pointer;

}

.my.message .bubble {

background-color: #b2e281;

}

.message .bubble {

max-width: 500px;

min-height: 1em;

display: inline-block;

vertical-align: top;

position: relative;

text-align: left;

font-size: 14px;

border-radius: 3px;

margin: 0 10px;

background-color: #fff;

}

.message .bubble img {

display: inline-block;

cursor: pointer;

max-width: 350px;

max-height: 240px;

}

.other .bubble:before {

position: absolute;

top: 14px;

left: -10px;

border: 6px solid transparent;

content: ’ ';

border-right-color: #fff;

border-right-width: 4px;

}

.my .bubble:before {

position: absolute;

top: 14px;

right: -10px;

border: 6px solid transparent;

content: ’ ';

border-left-color: #b2e281;

border-left-width: 4px;

}

.bubble_cont {

word-wrap: break-word;

word-break: break-all;

min-height: 25px;

padding: 9px 13px;

}

.box-ft {

border-top: 1px solid #ccc;

position: absolute;

height: 180px;

bottom: 0;

right: 0;

left: 0;

}

.box-ft .toolbar {

height: 30px;

padding: 5px 20px;

}

.box-ft .toolbar .face {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -404px -398px;

}

.box-ft .toolbar .screen-cut {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -30px -432px;

}

.box-ft .toolbar .file label {

opacity: 0;

width: 100%;

height: 100%;

display: block;

cursor: pointer;

background: rgb(255, 255, 255);

}

.box-ft .toolbar .file {

display: inline-block;

vertical-align: middle;

width: 30px;

height: 30px;

background: url(‘…/images/wechat-sprit.png’) no-repeat -120px -432px;

}

.box-ft .content {

height: 90px;

overflow-x: hidden;

padding: 0px 20px;

}

.box-ft .content .text {

resize: none;

border: none;

outline: none;

width: 100%;

height: 84px;

font-size: 16px;

background-color: #eee;

}

.box-ft .action {

text-align: right;

margin-top: 5px;

padding-right: 20px;

}

.box-ft .action .desc {

color: #888;

font-size: 12px;

margin-left: 10px;

margin-right: 7px;

}

.btn-send {

display: inline-block;

border: 1px solid #c1c1c1;

text-decoration: none;

background-color: #fff;

color: #222;

border-radius: 4px;

padding: 3px 30px;

font-size: 14px;

}

.btn-send:hover {

background-color: #d8d8d8;

}

.header {

padding: 18px;

position: relative;

}

.header .avatar {

display: table-cell;

vertical-align: middle;

word-wrap: break-word;

word-break: break-all;

white-space: nowrap;

padding-right: 10.625px;

}

.header .avatar .img {

width: 40px;

height: 40px;

border-radius: 2px;

display: block;

cursor: pointer;

}

.header .info {

display: table-cell;

vertical-align: middle;

word-wrap: break-word;

word-break: break-all;

width: 2000px;

}

.header .info h3 {

display: inline-block;

font-weight: 400;

width: 156px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

color: #fff;

font-size: 18px;

vertical-align: top;

line-height: 31px;

text-decoration: none;

}

.title {

padding: 13px 18px 11px;

border-bottom: 1px solid #24272c;

border-top: 1px solid #24272c;

color: #fff;

}

.title h3 {

font-weight: 400;

font-size: 18px;

}

.user {

overflow: hidden;

padding: 12px 18px 11px;

border-bottom: 1px solid #292c33;

cursor: pointer;

position: relative;

}

.user .avatar {

float: left;

margin-right: 10px;

position: relative;

}

.user .avatar img {

display: block;

width: 40px;

height: 40px;

border-radius: 2px;

}

.user .name {

color: #fff;

overflow: hidden;

line-height: 36px;

}

.login_box {

position: absolute;

top: 50%;

left: 50%;

width: 380px;

height: 380px;

transform: translate(-50%, -50%);

border-radius: 4px;

background-color: #fff;

box-shadow: #999 0 2px 10px;

}

.login_box h3 {

text-align: center;

color: #333;

font-size: 24px;

font-weight: 400;

line-height: 100px;

}

.login_box input {

width: 300px;

height: 30px;

line-height: 30px;

margin: 0 auto;

padding: 0;

display: block;

outline: none;

margin-bottom: 5px;

}

.weui-btn {

position: relative;

display: block;

width: 300px;

margin: 0 auto;

box-sizing: border-box;

font-size: 14px;

text-align: center;

text-decoration: none;

color: #ffffff;

line-height: 2.55555556;

border-radius: 5px;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

overflow: hidden;

background-color: #1aad19;

border: none;

cursor: pointer;

margin-top: 5px;

}

.login_box ul {

overflow: hidden;

width: 280px;

margin: 0 auto;

border: 1px solid #ccc;

padding: 0 10px;

}

.login_box li {

float: left;

width: 44px;

height: 44px;

border: 2px solid transparent;

margin: 0 4px;

cursor: pointer;

}

.login_box li.now {

border-color: #1aad19;

}

.login_box img {

width: 40px;

height: 40px;

display: block;

}

.login_box p {

height: 30px;

line-height: 30px;

padding-left: 38px;

}

::-webkit-scrollbar-track-piece {

background-color: #f8f8f8;

}

::-webkit-scrollbar {

width: 6px;

height: 6px;

border-radius: 3px;

}

::-webkit-scrollbar-thumb {

background-color: #ccc;

background-clip: padding-box;

min-height: 28px;

}

::-webkit-scrollbar-thumb:hover {

background-color: #666;

}

4.实现简单登陆

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

index.js

/*

  1. 连接socketio服务

*/

var socket = io(‘http://localhost:3000’)

var username, avatar

/*

  1. 登录功能

*/

$(‘#login_avatar li’).on(‘click’, function() {

$(this)

.addClass(‘now’)

.siblings()

.removeClass(‘now’)

})

// 点击按钮,登录

$(‘#loginBtn’).on(‘click’, function() {

// 获取用户名

var username = $(‘#username’)

.val()

.trim()

if (!username) {

alert(‘请输入用户名’)

return

}

// 获取选择的头像

var avatar = $(‘#login_avatar li.now img’).attr(‘src’)

// 需要告诉socket io服务,登录

socket.emit(‘login’, {

username: username,

avatar: avatar

})

})

// 监听登录失败的请求

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

alert(‘用户名已经存在’)

})

// 监听登录成功的请求

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

// 需要显示聊天窗口

// 隐藏登录窗口

$(‘.login_box’).fadeOut()

$(‘.container’).fadeIn()

// 设置个人信息

console.log(data)

$(‘.avatar_url’).attr(‘src’, data.avatar)

$(‘.user-list .username’).text(data.username)

username = data.username

avatar = data.avatar

})

在这里插入图片描述

app.js中


let users=[];//记录所有已经登陆的用户

io.on(‘connection’, function (socket) {

socket.on(“login”,data=>{

// 判断该账号是否已经被登陆

let user = users.find(item =>item.username===data.username);

if(user){

//该账户已经存在,登陆失败

socket.emit(‘login’,{msg:“登录失败”})

console.log(“登陆失败”);

}else{

//该用户不存在,登陆成功

users.push(data);

socket.emit(‘loginSuccess’,data) //这两个data不可以携程user,因为user是空的

console.log(“登陆成功”);

}

})

});

在这里插入代码片

5在聊天室里广播告诉所有人该有的消息

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

5.1.告诉有人进来了

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

5.1.1服务端(app.js)

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

io.emit(“addUser”,data);

5.1.2客户端(index.js)

// 监听添加用户的消息

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

// 添加一条系统消息

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

${data.username}加入了群聊

`)

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

})

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

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

在这里插入图片描述

5.2.1服务端(app.js)

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

io.emit(“userList”,users);

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

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

html5

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8405.html
标签
websocket
评论
会员中心 联系我 留言建议 回顶部
复制成功!