最新微信小程序开发之——WebSocket通信-示例(2)，最佳实践React性能优化

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

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

• 小程序端模拟聊天对话，右侧是用户端(发送消息后)，左侧是Socket回复消息

• 小程序底部，输入框输入内容，点击发送按钮发送给服务器

二 示例逻辑介绍

---

• 在onLoad方法中，小程序连接Node服务器

• 当输入框中输入内容，并点击发送按钮，此时的role为用户端，显示在右侧

• 当输入框中内容为空时，提示消息不能为空哦~

• 服务器端接收到用户发来的消息，返回自动回复，此时的role为服务端，显示在左侧

• 发送完成后，页面滚动到底部

三 WebSocket通信示例—服务器

---

3.1 安装package.json中依赖

npm install

3.2 启动服务

node socket.js

四 WebSocket通信示例—小程序

---

4.1 布局文件(index.wxml)

{{item.content}}

{{item.content}}

发送

4.2 样式文件(index.wxss)

page{

background-color: #f7f7f7;

height: 100%;

}

.wrap{

width: 100%;

height: 100%;

display: flex;

border-top: 0px;

box-sizing: border-box;

}

.chat{

padding: 5rpx 10rpx;

font-size: 14px;

line-height: 80rpx;

word-break: break-all;

margin-bottom: 100rpx;

box-sizing: border-box;

}

/* 聊天*/

.chat-news{

width: 100%;

overflow: hidden;

}

.news-lf{

float: right;

padding-right: 20rpx;

}

.chat-news::after{

display: block;

height: 0;

clear: both;

content: ‘’;

}

.new-rl{

float: left;

padding-left: 20rpx;

}

.new-img{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

vertical-align: middle;

margin-right: 10rpx;

}

.new-txt{

max-width: 300rpx;

display: inline-block;

border-radius: 6rpx;

line-height: 60rpx;

background: #95d4ff;

padding: 5rpx 20rpx;

margin: 0 10rpx;

margin-left: 50rpx;

}

.new-text{

margin-left: 0;

background: lightgreen;

}

/* 信息输入区域*/

.message{

position: fixed;

bottom: 0;

width: 100%;

height: 102rpx;

padding: 10rpx;

background-color: #fff;

border-top: 2rpx solid #eee;

box-sizing: border-box;

z-index: 3;

}

.message input{

float: left;

width: 76%;

height: 100%;

line-height: 80rpx;

padding: 0 10rpx;

font-size: 35rpx;

color: #666;

}

.message button{

float: right;

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

前端面试题汇总

JavaScript

前端资料汇总