详解微信小程序开发聊天室—实时聊天,支持图片预览


Posted in Javascript onMay 20, 2019

第一次写小程序,老板就让我用websoket写个聊天对话,群聊这种。第一次写聊天功能,第一次用websoket,第一次用小程序,这是在考验我吗?不过我还是研究了一下,终于实现了。

首先看一下界面,界面很简单,就是首页刚进来获取了用户信息头像,昵称等。点击进入聊天室就可以聊天了,下面我介绍的是前端代码实现,后台需要做的很简单,就是你给他发送什么数据,他就给你返回什么数据,就是在接收前台发送过来的图片的时候需要做个格式转换,因为有时候前端将接收到的json字符串转换json对象的时候,遇到有特殊的标点符号可能会报错,比如我就是‘\'报的错,找了半天。

因为有人咨询,所以附上所有小程序代码,地址:https://github.com/chongwenwen/weixin_chat/tree/master

有人说为什么没有utile.js的代码,这个功能只用到websoket.js跟utile.js没有关系哦!还有后台代码在页面最底下

详解微信小程序开发聊天室—实时聊天,支持图片预览         详解微信小程序开发聊天室—实时聊天,支持图片预览

详解微信小程序开发聊天室—实时聊天,支持图片预览        详解微信小程序开发聊天室—实时聊天,支持图片预览

文档目录结构如下:(聊天页面为chat)

详解微信小程序开发聊天室—实时聊天,支持图片预览  

chat.wxml页面

首先写好页面结构,既然是群聊功能,肯定有自己和别人,所以页面的view盒子应给有两部分,一个内容左侧显示,一个内容右侧显示,下面是代码,因为没有正式注册企业项目,我用的服务器都是本地的服务器,所以界面区分别人和我的聊天信息是用昵称区分的,如果正式项目应该是由一个用户标记去区分的

<view class="news" bindtap='outbtn'>
 
<view class="chat-notice" wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入群聊</view>
 
<view class="historycon">
 
<scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}">
 
<block wx:for="{{newslist}}" wx:key>
 
    <!-- 历史消息 -->
 
<!-- <view class="chat-news">
<view style="text-align: left;padding-left: 20rpx;">
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
<text class="name">{{ item.nickName }}{{item.date}}</text>
</view>
<view class='you_left'>
<block wx:if="{{item.type=='text'}}">
<view class='new_txt'>{{item.content}}</view>
</block>
<block wx:if="{{item.type=='image'}}">
<image class="selectImg" src="{{item.images}}"></image>
</block>
</view>
</view> -->
 
<view>{{item.date}}</view>
 
<!--自己的消息 -->
 
<view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}">
 
<view style="text-align: right;padding-right: 20rpx;">
 
<text class="name">{{ item.nickName }}</text>
 
<image class='new_img' src="{{userInfo.avatarUrl}}"></image>
 
</view>
 
<view class='my_right'>
 
<block wx:if="{{item.type=='text'}}">
 
<view class='new_txt'>{{item.content}}</view>
 
</block>
 
<block wx:if="{{item.type=='image'}}">
 
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
 
</block>
 
</view>
 
</view>
 
<!-- 别人的消息 -->
 
<view class="chat-news" wx:else>
 
<view style="text-align: left;padding-left: 20rpx;">
 
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
 
<text class="name">{{ item.nickName }}</text>
 
</view>
 
<view class='you_left'>
 
<block wx:if="{{item.type=='text'}}">
 
<view class='new_txt'>{{item.content}}</view>
 
</block>
 
<block wx:if="{{item.type=='image'}}">
 
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
 
</block>
 
</view>
 
</view>
 
</block>
 
</scroll-view>
 
</view>
 
</view>
 
<view id="flag"></view>
 
<!-- 聊天输入 -->
 
<view class="message">
 
<form bindreset="cleanInput" class="sendMessage">
 
<input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input>
 
<view class="add" bindtap='increase'>+</view>
 
<button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button>
 
</form>
 
<view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">
 
<view class="image" bindtap='chooseImage'>相册 </view>
 
</view>
 
</view>

websoket.js文件

在utils目录下,是封装了websoket的请求过程,以便在chat.js中调用。需要注意的是wx.connectSocket代表客户端首次和服务器建立联系,wx.onSocketOpen才是正式打开通道,wx.onSocketMessage必须在 wx.onSocketOpen 回调之后发送才生效。

wx.onSocketMessage里面带有参数是一个函数回调,这个回调就是后台服务器实时接收并返给前台的数据

var url = 'ws://........';//服务器地址
 
 
 
function connect(user,func) {
 
wx.connectSocket({
 
url: url,
 
header:{'content-type': 'application/json'},
 
success: function () {
 
console.log('信道连接成功~')
 
},
 
fail: function () {
 
console.log('信道连接失败~')
 
}
 
})
 
wx.onSocketOpen(function (res) {
 
wx.showToast({
 
title: '信道已开通~',
 
icon: "success",
 
duration: 2000
 
})
 
//接受服务器消息
 
wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据
 
});
 
wx.onSocketError(function (res) {
 
wx.showToast({
 
title: '信道连接失败,请检查!',
 
icon: "none",
 
duration: 2000
 
})
 
})
 
}
 
//发送消息
 
function send(msg) {
 
wx.sendSocketMessage({
 
data: msg
 
});
 
}
 
module.exports = {
 
connect: connect,
 
send: send
 
}

chat.js文件

聊天室的逻辑操作页面,websocket.connect(){}调用的是websocket.js封装好的websoket的逻辑函数,回调就是后台的数据,之所以在本页面调用就是方便接收以后的逻辑操作。我建立文件的时候用的就是微信官方的快速模板生成的,所以app.js里面没有变动,用户在chat.js获取userInfo的时候可以引用全局的app.globalData.userInfo

详解微信小程序开发聊天室—实时聊天,支持图片预览

 还有要注意的一点就是在选择发送图片的时候,必须是先把本地的图片地址发送给后台,转换成服务器的图片地址再次通过wensoket.send发送给服务器,这个时候服务器推送给其他用户的才是正确的地址,否则你的本地地址其他用户是访问不到的。

// pages/chat/chat.js
 
const app = getApp()
 
var websocket = require('../../utils/websocket.js');
 
var utils = require('../../utils/util.js');
 
Page({
 
 
 
/**
* 页面的初始数据
*/
 
data: {
 
newslist:[],
 
userInfo: {},
 
scrollTop: 0,
 
increase:false,//图片添加区域隐藏
 
aniStyle: true,//动画效果
 
message:"",
 
previewImgList:[]
 
},
 
/**
* 生命周期函数--监听页面加载
*/
 
onLoad: function () {
 
var that = this
 
if (app.globalData.userInfo) {
 
this.setData({
 
userInfo: app.globalData.userInfo
 
})
 
}
 
//调通接口
 
websocket.connect(this.data.userInfo, function (res) {
 
// console.log(JSON.parse(res.data))
 
var list = []
 
list = that.data.newslist
 
list.push(JSON.parse(res.data))
 
that.setData({
 
newslist: list
 
})
 
})
 
},
 
// 页面卸载
 
onUnload(){
 
wx.closeSocket();
 
wx.showToast({
 
title: '连接已断开~',
 
icon: "none",
 
duration: 2000
 
})
 
},
 
//事件处理函数
 
send: function () {
 
var flag = this
 
if (this.data.message.trim() == ""){
 
wx.showToast({
 
title: '消息不能为空哦~',
 
icon: "none",
 
duration: 2000
 
})
 
}else {
 
setTimeout(function(){
 
flag.setData({
 
increase: false
 
})
 
},500)
 
websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl+'" }')
 
this.bottom()
 
}
 
},
 
//监听input值的改变
 
bindChange(res) {
 
this.setData({
 
message : res.detail.value
 
})
 
},
 
cleanInput(){
 
//button会自动清空,所以不能再次清空而是应该给他设置目前的input值
 
this.setData({
 
message: this.data.message
 
})
 
},
 
increase() {
 
this.setData({
 
increase: true,
 
aniStyle: true
 
})
 
},
 
//点击空白隐藏message下选框
 
outbtn(){
 
this.setData({
 
increase: false,
 
aniStyle: true
 
})
 
},
 
//发送图片
 
chooseImage() {
 
var that = this
 
wx.chooseImage({
 
count: 1, // 默认9
 
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 
success: function (res) {
 
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 
var tempFilePaths = res.tempFilePaths
 
// console.log(tempFilePaths)
 
wx.uploadFile({
 
url: 'http://.....', //服务器地址
 
filePath: tempFilePaths[0],
 
name: 'file',
 
headers: {
 
'Content-Type': 'form-data'
 
},
 
success: function (res) {
 
if (res.data){
 
that.setData({
 
increase: false
 
})
 
websocket.send('{"images":"'+ res.data +'","date":"'+utils.formatTime(new Date())+'","type":"image","nickName":"'+that.data.userInfo.nickName+'","avatarUrl":"'+that.data.userInfo.avatarUrl+'"}')
 
that.bottom()
 
}
 
}
 
})
 
}
 
})
 
},
 
//图片预览
 
previewImg(e){
 
var that = this
 
//必须给对应的wxml的image标签设置data-set=“图片路径”,否则接收不到
 
var res = e.target.dataset.src
 
var list = this.data.previewImgList //页面的图片集合数组
 
//判断res在数组中是否存在,不存在则push到数组中, -1表示res不存在
 
if (list.indexOf(res) == -1 ) {
 
this.data.previewImgList.push(res)
 
}
 
wx.previewImage({
 
current: res, // 当前显示图片的http链接
 
urls: that.data.previewImgList // 需要预览的图片http链接列表
 
})
 
},
 
//聊天消息始终显示最底端
 
bottom: function () {
 
var query = wx.createSelectorQuery()
 
query.select('#flag').boundingClientRect()
 
query.selectViewport().scrollOffset()
 
query.exec(function (res) {
 
wx.pageScrollTo({
 
scrollTop: res[0].bottom // #the-id节点的下边界坐标
 
})
 
res[1].scrollTop // 显示区域的竖直滚动位置
 
})
 
},
 
})

最后是页面的样式文件chat.wxss

/* pages/chat/chat.wxss */
 
page {
 
background-color: #f7f7f7;
 
height: 100%;
 
}
 
/* 聊天内容 */
 
.news {
 
padding-top: 30rpx;
 
text-align: center;
 
/* height:100%; */
 
box-sizing:border-box;
 
}
 
#flag{
 
margin-bottom: 100rpx;
 
height: 30rpx;
 
}
 
.chat-notice{
 
text-align: center;
 
font-size: 30rpx;
 
padding: 10rpx 0;
 
color: #666;
 
}
 
.historycon {
 
height: 100%;
 
width: 100%;
 
/* flex-direction: column; */
 
display: flex;
 
border-top: 0px;
 
}
 
/* 聊天 */
 
.chat-news{
 
width: 100%;
 
overflow: hidden;
 
}
 
.chat-news .my_right {
 
float: right;
 
/* right: 40rpx; */
 
padding: 10rpx 10rpx;
 
}
 
.chat-news .name{
 
margin-right: 10rpx;
 
}
 
.chat-news .you_left {
 
float: left;
 
/* left: 5rpx; */
 
padding: 10rpx 10rpx;
 
}
 
.selectImg{
 
display: inline-block;
 
width: 150rpx;
 
height: 150rpx;
 
margin-left: 50rpx;
 
}
 
.my_right .selectImg{
 
margin-right: 80rpx;
 
}
 
.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-color: #95d4ff;
 
padding: 5rpx 20rpx;
 
margin: 0 10rpx;
 
margin-left: 50rpx;
 
}
 
.my_right .new_txt{
 
margin-right:60rpx;
 
}
 
.you{
 
background-color: lightgreen;
 
}
 
.my {
 
border-color: transparent transparent transparent #95d4ff;
 
}
 
.you {
 
border-color: transparent #95d4ff transparent transparent;
 
}
 
.hei{
 
margin-top: 50px;
 
height: 20rpx;
 
}
 
.history {
 
height: 100%;
 
margin-top: 15px;
 
padding: 10rpx;
 
font-size: 14px;
 
line-height: 40px;
 
word-break: break-all;
 
}
 
::-webkit-scrollbar {
 
width: 0;
 
height: 0;
 
color: transparent;
 
z-index: -1;
 
}
 
 
 
/* 信息输入区域 */
 
.message{
 
position: fixed;
 
bottom:0;
 
width: 100%;
 
}
 
.sendMessage{
 
display: block;
 
height: 80rpx;
 
padding: 10rpx 10rpx;
 
background-color: #fff;
 
border-top: 2rpx solid #eee;
 
border-bottom: 2rpx solid #eee;
 
z-index:3;
 
}
 
.sendMessage input{
 
float:left;
 
width: 66%;
 
height: 100%;
 
line-height: 80rpx;
 
border-bottom: 1rpx solid #ccc;
 
padding:0 10rpx;
 
font-size: 35rpx;
 
color: #666;
 
}
 
.sendMessage view{
 
display: inline-block;
 
width: 80rpx;
 
height: 80rpx;
 
line-height: 80rpx;
 
font-size: 60rpx;
 
text-align: center;
 
color: #999;
 
border: 1rpx solid #ccc;
 
border-radius: 50%;
 
margin-left: 10rpx;
 
}
 
.sendMessage button {
 
float: right;
 
font-size: 35rpx;
 
}
 
.increased{
 
width:100%;
 
/* height: 150rpx; */
 
padding: 40rpx 30rpx;
 
background-color: #fff;
 
}
 
.increased .image{
 
width: 100rpx;
 
height: 100rpx;
 
border: 3rpx solid #ccc;
 
line-height: 100rpx;
 
text-align: center;
 
border-radius: 8rpx;
 
font-size:35rpx;
 
}
 
@keyframes slidedown {
 
from {
 
transform: translateY(0);
 
}
 
to {
 
transform: translateY(100%);
 
}
 
}
 
.slidedown {
 
animation: slidedown 0.5s linear ;
 
}
 
.slideup {
 
animation: slideup 0.5s linear ;
 
}
 
@keyframes slideup {
 
from {
 
transform: translateY(100%);
 
}
 
to {
 
transform: translateY(0);
 
}
 
}

后台代码(图片):

详解微信小程序开发聊天室—实时聊天,支持图片预览

以上所述是小编给大家介绍的微信小程序实时聊天支持图片预览详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的property和attribute介绍
Dec 26 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
vue-router传参用法详解
Jan 19 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
JavaScript ES6的函数拓展
Jan 18 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
You might like
phpmyadmin操作流程
2006/10/09 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
JS getStyle获取最终样式函数代码
2010/04/01 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python实现无边框进度条的实例代码
2020/12/30 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
关键字throw与throws的用法差异
2016/11/22 面试题
电大自我鉴定
2013/10/27 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
动员大会主持词
2014/03/20 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
论文评审意见
2015/06/05 职场文书
对讲机知识
2022/04/07 无线电
Java 写一个简单的图书管理系统
2022/04/26 Java/Android