06----3小时 用 websocket 实现聊天室 之实现聊天功能

// 自己的消息

$(‘.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。

ES6

• 列举常用的ES6特性：

• 箭头函数需要注意哪些地方？

• let、const、var

• 拓展：var方式定义的变量有什么样的bug？

• Set数据结构

• 拓展：数组去重的方法

• 箭头函数this的指向。

• 手写ES6 class继承。

微信小程序

• 简单描述一下微信小程序的相关文件类型?

• 你是怎么封装微信小程序的数据请求？

• 有哪些参数传值的方法？

• 你使用过哪些方法，来提高微信小程序的应用速度？

• 小程序和原生App哪个好？

• 简述微信小程序原理？

• 分析微信小程序的优劣势

• 怎么解决小程序的异步请求问题？

其他知识点面试

• webpack的原理

• webpack的loader和plugin的区别？

• 怎么使用webpack对项目进行优化?

• 防抖、节流

• 浏览器的缓存机制

• 描述一下二叉树, 并说明二叉树的几种遍历方式?

• 项目类问题

• 笔试编程题：

最后

技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。