文章目录

  • 项目场景：
  • 代码示例：
  • 一、聊天功能
  • 二、发送消息后滚动到底部
  • 三、历史记录查询及下拉加载更多功能实现
  • 四、微信小程序即时聊天功能其他注意事项
  • 五、本文参考文章

项目场景：

微信小程序中实现websocket,即时聊天功能

核心包含以下内容

1.聊天功能实现

2.发送消息后滚动到底部

3.历史记录查询及下拉加载更多功能实现

代码示例：

wxml

<!--pages/wechat2/wechat2.wxml--><view class="chat-header"><view class="header-image-box"><image class="header-image" src="{{receivebaseInfo.avatar}}"></image></view><view><view class="chat-name">{{receivebaseInfo.nickname}}</view><view class="chat-company">{{receivebaseInfo.company_name}} - {{receivebaseInfo.department_name}}</view></view></view>
<view class='news'><view class="historycon"><scroll-view scroll-y="true" scroll-into-view="{{scrollid}}" scroll-with-animation = "{{true}}"  style="height:{{scrollHeight}}" class="history"refresher-enabled="true"bindrefresherrefresh="refresh"refresher-triggered="{{triggered}}"><!-- 历史记录部分start --><view wx:if="{{historyList.length > 0}}"><view class="historyText">历史消息</view><block wx:for="{{historyList}}" wx:key="index"><!--此处为other --><view wx:if="{{item.type==1}}" id="historyscrollid{{index}}"><view><text class='chat-time' style="display:none;">{{item.date}}</text></view><view class='other-record'><image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image><view class='other-record-content-triangle'></view><view class='other-record-content'>{{item.content_msg}}</view></view></view><!--此处为结尾 --><!--此处为own --><view id="historyscrollid{{index}}" wx:else><view><text class='chat-time' style="display:none;">{{item.date}}</text></view><view class='own-record'><view class='own-record-content'>{{item.content_msg}}</view><view class='own-record-content-triangle'></view><image class='own-head-img' src='{{sendAvatar}}'></image></view></view><!-- own结尾 --></block><view class="historyText">以上为历史消息</view></view><!-- 历史记录部分end --><block wx:for="{{newsList}}" wx:key="index"><!--此处为other --><view wx:if="{{item.type==1}}" id="scrollid{{index}}"><view><text class='chat-time' style="display:none;">{{item.date}}</text></view><view class='other-record'><image class='other-head-img' src='{{receivebaseInfo.avatar}}'></image><view class='other-record-content-triangle'></view><view class='other-record-content'>{{item.message}}</view></view></view><!--此处为结尾 --><!--此处为own --><view id="scrollid{{index}}" wx:else><view><text class='chat-time' style="display:none;">{{item.date}}</text></view><view class='own-record'><view class='own-record-content'>{{item.message}}</view><view class='own-record-content-triangle'></view><image class='own-head-img' src='{{sendAvatar}}'></image></view></view><!-- own结尾 --></block></scroll-view></view>
</view>
<view class="sendmessage"><view class="send-message"><input class="chat-input" type="text" bindinput="bindChange" confirm-type="done" value='{{input}}' cursor-spacing="16px" hold-keyboard="{{true}}" placeholder="" /><image class="chat-emotion" src="../../static/img/chat-emotion.svg" bindtap="emotionChange"></image><button class="btn" bindtap='send'>发送</button></view><view class="emotions" wx:if="{{emotionVisible}}"><view class="emotions-item"  wx:for="{{connectemoji}}" wx:key="index" bindtap="addemotion" data-index="{{index}}">{{item}}</view></view>
</view>

**说明：**结构主要包括头部聊天方的信息部分，历史记录部分，即时聊天内容部分，发送消息部分

wxss

/* pages/wechat2/wechat2.wxss */
page { background-color: #f3f3f4; } /* 新增样式 */.chat-header {display: flex;align-items: center;justify-content: flex-start;height: 88px;padding: 0 12px;background-color: #fff;border-radius: 0px 0px 10px 10px;}.header-image-box {width: 64px;height: 64px;border-radius: 50%;margin-right: 12px;}.header-image {width: 100%;height: 100%;border-radius: 50%;}.chat-name {color: #333;font-size: 16px;font-weight: 700;}.chat-company {font-size: 14px;color: rgba(81, 81, 81, 100);}.tab { padding: 20rpx 20rpx 40rpx 50rpx; height: 20%; background-color: white; } .tab .tent { font-size: 33rpx; margin-bottom: 30rpx; } .jia_img{ height: 80rpx; width: 90rpx; } .new_imgtent{ height: 180rpx; width: 190rpx; } .tab .fabu { font-size: 33rpx; margin-top: 30rpx; margin-bottom: 30rpx; } .xiahuaxia { width: 80%; text-align: center; margin: 0 auto; position: relative; top: 60rpx; } .chat-time { text-align: center; padding: 5rpx 20rpx 5rpx 20rpx; width: 200rpx; font-size: 26rpx; background-color: #e6e6e6; } .new_top_txt { width: 50%; position: relative; top: 38rpx; text-align: center; margin: 0 auto; font-size: 30rpx; color: #787878; background-color: #f7f7f7; } /* 聊天内容 */ .news { margin-top: 30px; text-align: center; margin-bottom: 98px; } .img_null { height: 60rpx; } .l { height: 5rpx; width: 20%; margin-top: 30rpx; color: #000; } /* 聊天 */ .my_right { float: right; position: relative; right: 40rpx; } .you_left { float: left; position: relative; left: 5rpx; } .new_img { width: 100rpx; height: 100rpx; border-radius: 50%; } .sanjiao { top: 20rpx; position: relative; width: 0px; height: 0px; border-width: 10px; border-style: solid; } .my { border-color: transparent transparent transparent #95d4ff; } .you { border-color: transparent #95d4ff transparent transparent; } .sendmessage { /* display: flex;align-items: center;flex-direction: row; */width: 100%; min-height: 60px;position: fixed; bottom: 0px; padding: 0 16px;background-color: rgba(242, 242, 242, 100); box-shadow: 0px -1px 5px 1px rgba(57, 57, 57, 0.1);} .send-message {display: flex;align-items: center;padding: 16px;}.sendmessage input { height: 80rpx; background-color: white; line-height: 80rpx; font-size: 28rpx; padding-left: 20rpx; } .sendmessage button { width: 52px !important; height: 32px; line-height: 32px;background: #169171 !important; color: #fff !important; font-size: 14px !important;text-align: center;border: 0 !important;padding: 0 !important;margin: 0 !important;} .historycon { height: 90%; /* background-color: pink; */width: 100%; flex-direction: column; display: flex; /* margin-top: 100rpx;  */border-top: 0px; } .hei{ margin-top: 50px; height: 20rpx; } .history { /* height: 300px;  */margin-top: 30rpx; margin: 20rpx; font-size: 28rpx; line-height: 80rpx; word-break: break-all; } .chat-input{width: 60%;height: 40px;border: 0;border-radius: 8px;margin-left: 5rpx;}.back-icon{margin-top: 25rpx;margin-left: 25rpx; width:40rpx;height:40rpx;}.other-record-content{background-color: #fff;width: 180px; border-radius: 7px; padding: 0 20px;text-align: left;margin: 6px 0;}.other-record{display: flex;justify-content:flex-start;}.other-head-img{width:70rpx;height:70rpx;border-radius: 50%;margin: 10rpx 10rpx 10rpx 10rpx;}.other-record-content-triangle{ width: 0; height: 0; border-top: 10rpx solid transparent; border-right: 15rpx solid #fff; border-bottom: 10rpx solid transparent;margin-top: 36rpx; }.own-record{display: flex;justify-content:flex-end;padding-right:30rpx; }.own-record-content{background-color: #209072;width: 180px; border-radius: 8px; padding: 0 20px;color: #fff;text-align: left;margin: 6px 0;}.own-record-content-triangle { width: 0; height: 0; /* border-top: 20rpx solid transparent; border-left: 40rpx solid #F0F0F0; border-bottom: 20rpx solid transparent;  */border-top: 10rpx solid transparent; border-left: 15rpx solid #209072; border-bottom: 10rpx solid transparent; margin-top: 36rpx; }.own-head-img{width:70rpx;height:70rpx;border-radius: 50%;margin: 10rpx 10rpx 10rpx 10rpx;}::-webkit-scrollbar{width: 0;height: 0;color: transparent;}.chat-emotion {width: 28px;height: 28px;margin: 0 12px;}.emotions {display: flex;align-items: flex-start;justify-content: flex-start;width: 200px;height: 36px;margin: 6px;}.emotions-item {width: 24px;height: 24px;margin: 0 8px;}.historyText {color: #ccc;}

js


var utils = require("../../utils/util.js")
const app = getApp()
const api = require('../../utils/request.js'); //相对路径
Page({/*** 页面的初始数据*/data: {receivebaseInfo:{},sendAvatar:'',newsList:[{date: "2020.10.19",message:'哈喽，好久不见',type: 0},{date: "2020.10.20",message:'是呀，好久不见',type: 1},{date: "2020.10.20",message:'是呀，好久不见',type: 1},],//消息列表historyList:[],input:null,openid:null,connectemoji: ["												


											

微信小程序websocket实现即时聊天功能相关推荐
	

    
						
  1. 微信小程序websocket实现即时聊天
		
    今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一 ...
    
		
    2. 
						
  2. 微信小程序 WebSocket 通信 —— 在线聊天
		
    在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的We ...
    
		
    3. 
						
  3. 微信小程序WebSocket相关问题说明
		
    看本帖的前提是:你的WebSocket在小程序之外是正常可用的:因为WebSocket不是小程序独有的,所有大部分问题在网上是可以找到说明的,本帖只是聚合了一些小程序中使用WebSocket中遇到的问 ...
    
		
    4. 
						
  4. 微信小程序websocket聊天前端实现
		
    微信小程序websocket聊天前端实现,可以发语音.图片.文字. 代码下载:https://download.csdn.net/download/cc1314_/10983195
    
		
    5. 
						
  5. 微信小程序WebSocket接口以及在小程序中的使用。
		
    关于微信小程序WebSocket的使用 一.连接wx.connectSocket 二.wx.onSocketOpen和wx.onSocketError 三.wx.onSocketMessage 四.w ...
    
		
    6. 
						
  6. 微信小程序WebSocket心跳检测与断来重连
		
    为什么要心跳检测 使用微信小程序WebSocket时,WebSocket在一定的时间没有进行通信就会断开连接,所以需要使用心跳检测. 那么心跳检测是什么呢,心跳检测顾名思义就是和人心脏动一样,客户端在 ...
    
		
    7. 
						
  7. 微信小程序 - 实现左滑动删除功能
		
    微信小程序 - 实现左滑动删除功能 效果图: 实现过程: 一.wxml布局 这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
    
		
    8. 
						
  8. 微信小程序购物车 数量加减功能
		
    微信小程序购物车 数量加减功能 wxml <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> < ...
    
		
    9. 
						
  9. 微信小程序的搜索和重置功能
		
    微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
    
		
    10. 
						
  10. 基于微信小程序的用户列表点赞功能
		
    代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. 一步一步教你在 Android 里创建自己的账号系统（一）
		
    2. 
						
  2. 个人管理：简单，我微博中的一句话，总有你喜欢的
		
    3. 
						
  3. 成功解决ValueError: not enough values to unpack (expected 2, got 1)
		
    4. 
						
  4. 从618大促看直播风口，电商玩家如何走得更远
		
    5. 
						
  5. oracle10g ty_str_split,Oracle split(分隔字符串函数)
		
    6. 
						
  6. php mvc 路由,PHP手写MVC （五）—— 路由
		
    7. 
						
  7. 基于Xilinx FPGA实现PCIE2.0接口
		
    8. 
						
  8. 如何有效使用OpenPower720（上）
		
    9. 
						
  9. PHP 基于 SW-X 框架，搭建WebSocket服务器（一）
		
    10. 
						
  10. 医药领域知识图谱快速及医药问答项目
		
    11. 
						
  11. Word frequency program 词频分析程序
		
    12. 
						
  12. 美国佛罗里达州立大学刘毅老师招收机器学习方向全奖博士生
		
    13. 
						
  13. linux网线插拔后ip地址丢失,网线拔掉检测,嵌入式网线直连开发板断电网线拔掉之后,上电仍能自动设置static静态ip地址...
		
    14. 
						
  14. 线程死锁、锁死、饥饿、活锁讲解
		
    15. 
						
  15. AWK程序设计语言-翻译
		
    16. 
						
  16. java.awt包_java.awt包 简介
		
    17. 
						
  17. vCalendar文件格式解析
		
    18. 
						
  18. FTP 的安装与配置
		
    19. 
						
  19. 九八投洽会，图扑为你再现工业元宇宙
		
    20. 
						
  20. 《MIT JOS Lab1: Booting a PC》实验报告
		
    21. 
		

	


热门文章
	

    
									
  1. Java面试题！5年经验Java程序员面试27天，看看这篇文章吧！
			
    2. 
						
  2. java连接SqlServer2000
			
    3. 
						
  3. Android Studio 写个单元测试用例，就是这么方便
			
    4. 
						
  4. IDEA快速生成测试用例类和完成单元测试
			
    5. 
						
  5. 图像处理标准图像——“Lena图”的由来
			
    6. 
						
  6. noip模拟9 达哥随单题
			
    7. 
						
  7. greensock下载_GreenSock动画平台初学者指南
			
    8. 
						
  8. 博客日历的html代码,八种精美的博客日历代码
			
    9. 
						
  9. Linux停服务器命令,使用linux的shutdown命令关闭服务器
			
    10. 
						
  10. 最新emoji表情代码大全_7张最新有创意好看的早安问候动画表情图片 暖心的早上好问候祝福动态图片表情大全...
			
    11.