2024年前端最新用 websocket、JQuery开发仿微信聊天(1)，拥有百万粉丝的大牛讲述学前端的历程

2401_84620100

已于 2024-05-07 04:56:24 修改

阅读量791

点赞数 10

分类专栏：程序员文章标签：前端 websocket jquery

于 2024-05-07 04:56:22 首次发布

本文链接：https://blog.csdn.net/2401_84620100/article/details/138516404

版权

程序员专栏收录该内容

89 篇文章 0 订阅

订阅专栏

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

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

96道前端面试题：

常用算法面试题：

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

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

连接socketio服务

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

var username, avatar

登录功能

$(‘#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);

5.2.2客户端（index.js）

// 监听用户列表的消息

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

// 把userList中的数据动态渲染到左侧菜单

$(‘.user-list ul’).html(‘’)

data.forEach(item => {

$(‘.user-list ul’).append(`

${item.username}

`)

})

$(‘#userCount’).text(data.length)

})

5.3当有用户离开时广播告诉所有人有某某某离开

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

服务端（app.js）

//把用户信息存到socket中，方便退出时，告诉大家(这一步时在登录时做的)

socket.username=data.username;

socket.avatar=data.avatar;

**

到这里需要解释下说明socket 和 io 的区别，io 是广播给所有用户的，而socket 是属于该登录的用户自己拥有的

当socket.emit（）的时候也是把信息只发送给该用户

所以你会发现在客户端，接受的方式都是socket.on();

//当用户退出聊天室时

socket.on(‘disconnect’,function () {

console.log(“关闭”);

let index = users.findIndex(item=>item.username===socket.username);

users.splice(index,1);

//告诉大家有人退出了聊天室

io.emit(“delUser”,{

username:socket.username,

avatar:socket.avatar

})

//重新渲染用户列表

io.emit(“userList”,users);

})

客户端（index.js）

// 监听用户离开的消息

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

// 添加一条系统消息

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

${data.username}离开了群聊

`)

scrollIntoView()

})

6实现聊天功能

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

服务端（app.js）

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

//接受用户发送的信息

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

//把消息广播给所有人

io.emit(“receiveMessage”,data)

})

客户端

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

// 聊天功能

$(‘.btn-send’).on(‘click’, () => {

// 获取到聊天的内容

var content = $(‘#content’).html()

$(‘#content’).html(‘’)

if (!content) return alert(‘请输入内容’)

// 发送给服务器

socket.emit(‘sendMessage’, {

msg: content,

username: username,

avatar: avatar

})

})

// 监听聊天的消息

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

// 把接收到的消息显示到聊天窗口中

if (data.username === username) {

// 自己的消息

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

${data.msg}

`)

} else {

// 别人的消息

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

${data.username}

${data.msg}

`)

}

scrollIntoView()

})

实现图片的发送

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

服务端

//接受用户发送的图片

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

//把图片广播给所有人

io.emit(“receiveImage”,data)

})

客户端

在这里插入代码片

// 发送图片功能

$(‘#file’).on(‘change’, function() {

var file = this.files[0]

// 需要把这个文件发送到服务器，借助于H5新增的fileReader

var fr = new FileReader()

fr.readAsDataURL(file)

fr.onload = function() {

socket.emit(‘sendImage’, {

username: username,

avatar: avatar,

img: fr.result

})

}

})

// 监听图片聊天信息

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

// 把接收到的消息显示到聊天窗口中

if (data.username === username) {

// 自己的消息

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

`)

} else {

// 别人的消息

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

${data.username}

`)

}

// 等待图片加载完成,在滚动到底部

$(‘.box-bd img:last’).on(‘load’, function() {

scrollIntoView()

})

})

使用表情

 使用插件 jqury-emoji、

jquery-emoji文档

首先在页面上引用css文件和js文件，css文件一般在中添加，js文件一般在之前添加。注意要先引用jquery和jquery.mCustomScrollbar，再引用该js。

客户端

/ 初始化jquery-emoji插件

$(‘.face’).on(‘click’, function() {

$(‘#content’).emoji({

// 设置触发表情的按钮

button: ‘.face’,

showTab: false,

animation: ‘slide’,

position: ‘topRight’,

icons: [

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
- 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
- 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
- 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
、

jquery-emoji文档

首先在页面上引用css文件和js文件，css文件一般在中添加，js文件一般在之前添加。注意要先引用jquery和jquery.mCustomScrollbar，再引用该js。

客户端

/ 初始化jquery-emoji插件

$(‘.face’).on(‘click’, function() {

$(‘#content’).emoji({

// 设置触发表情的按钮

button: ‘.face’,

showTab: false,

animation: ‘slide’,

position: ‘topRight’,

icons: [

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
- 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
- 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
- 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

2401_84620100

关注

10
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最新用 websocket、JQuery开发仿微信聊天(1)，拥有百万粉丝的大牛讲述学前端的历程

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化left: 0;
复制链接

扫一扫