wxml
<view class='page_bg' wx:if='{{block}}' bindtap='hide_bg' />
<view class='btn_bg' wx:if='{{block}}'>
<view wx:for="{{link_list}}" wx:key='index'>
<button class="sp_tit" id='{{index}}' bindtap='list_item'>查看详情 {{item}} </button>
</view>
</view>
<scroll-view class="history" scroll-y="true" scroll-with-animation scroll-top="{{scrollTop}}">
<view class='myMsg' wx:for='{{myMsgList}}' style='text-align:{{item.userId =="id123"?"left":"right"}}'>
<image class='userImg' src='{{item.userImg}}' style='display:{{item.userId=="id123"?"":"none"}}'></image>
<view class='mytext'>{{item.userMsg}}</view>
<image class='userImg' src='{{item.userImg}}' style='display:{{item.userId!="id123"?"":"none"}}'></image>
</view>
<!-- <block wx:key="{{index}}" wx:for="{{allContentList}}">
<view>
<text class='time'>{{time}}</text>
</view>
<view class='my_right' wx:if="{{item.is_my}}">
<view class='p_r' wx:if='{{item.is_my.text}}'>
<text class='new_txt'><text class='new_txt_my'>{{item.is_my.text}}</text></text>
<view class='sanjiao my'></view>
<image class='new_img' src='/images/test.jpg'></image>
</view>
<view class='p_r' wx:if='{{item.is_my.img}}' bindtap='my_audio_click' data-id='{{index}}'>
<text class='new_txt'> </text>
<view class='my_img_bg'>
<image class='my_audio' src='{{img}}'></image></view>
<view class='sanjiao my'></view>
<image class='new_img' src='/images/test.jpg'></image>
</view>
</view>
<view class='you_left' id='id_{{allContentList.length}}' wx:key="{{index}}" wx:if="{{item.is_ai}}">
<view class='p_r'>
<image class='new_img' src='/images/chac.jpg'></image>
<view class='sanjiao you'></view>
<view class='new_txt'>
<view class='new_txt_ai'>
<block wx:for='{{item.is_two}}' wx:key='index'>
<text wx:if='{{item.text}}'>{{item.text}}</text>
<text wx:if='{{item.a.title}}' style='color:#0000EE' bindtap='link' id='{{item.a.link}}'>{{item.a.title}}</text>
</block>
</view>
</view>
</view>
</view>
</block> -->
</scroll-view>
<view class="sendmessage">
<image class='voice_icon' bindtap='addImg' src='/images/nav_h.png'></image>
<block wx:if='{{!addImg}}'>
<input type="text" bindinput="bindKeyInput" value='{{inputValue}}' focus='{{focus}}' bindfocus="focus" confirm-type="done" placeholder="" />
<button bindtap="submitTo" class='user_input_text'>发送</button>
</block>
<block wx:if='{{addImg}}'>
<view class='voice_ing' bindtap="upimg">发送图片</view>
</block>
</view>
js
var app = getApp();
var req = require('../../utils/request.js')
var socketOpen = false;
var frameBuffer_Data, session, SocketTask;
var url = 'ws://请填写您的长链接接口地址';
var userId = 'my123';
var upload_url = '请填写您的图片上传接口地址'
Page({
data: {
user_input_text: '',//用户输入文字
inputValue: '',
returnValue: '',
addImg: false,
//格式示例数据，可为空
allContentList: [],
myMsgList: [{userImg: '/images/heart1.png', userMsg: '学你说话，秒回',userId:'id123'}],
mername:'客人',
num: 0
},
// 页面加载
onLoad: function () {
this.bottom();
wx.setNavigationBarTitle({
title: '与'+ this.data.mername +'聊天中。。。'//页面标题为路由参数
})
},
onShow: function (e) {
req.HttpRequest('https://api.bmob.cn/1/classes/Message', 'GET')
console.log(req.dalist)
if (!socketOpen) {
this.webSocket()
}
// HttpRequest(baseUrl, data, type, allUrl)
},
// 页面加载完成
onReady: function () {
var that = this;
SocketTask.onOpen(res => {
socketOpen = true;
console.log('监听 WebSocket 连接打开事件。', res)
})
SocketTask.onClose(onClose => {
console.log('监听 WebSocket 连接关闭事件。', onClose)
socketOpen = false;
this.webSocket()
})
SocketTask.onError(onError => {
console.log('监听 WebSocket 错误。错误信息', onError)
socketOpen = false
})
SocketTask.onMessage(onMessage => {
console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息', JSON.parse(onMessage.data))
var onMessage_data = JSON.parse(onMessage.data)
if (onMessage_data.cmd == 1) {
that.setData({
link_list: text
})
console.log(text, text instanceof Array)
// 是否为数组
if (text instanceof Array) {
for (var i = 0; i < text.length; i++) {
text[i]
}
} else {
}
that.data.allContentList.push({ is_ai: true, text: onMessage_data.body });
that.setData({
allContentList: that.data.allContentList
})
that.bottom()
}
})
},
webSocket: function () {
// 创建Socket
SocketTask = wx.connectSocket({
url: url,
data: 'data',
header: {
'content-type': 'application/json'
},
method: 'post',
success: function (res) {
console.log('WebSocket连接创建', res)
},
fail: function (err) {
wx.showToast({
title: '网络异常！',
})
console.log(err)
},
})
},
// 提交文字
submitTo: function (e) {
if(this.data.inputValue==''){
wx.showToast({
title: '空的发什么啊',
icon:'none'
})
}else{
let that = this, Msg = that.data.inputValue;
that.data.myMsgList.push({ userImg: '/images/avatar.png', userMsg: Msg, userId: userId }, { userImg: '/images/heart1.png', userMsg: Msg, userId: 'id123' })
that.setData({
myMsgList: that.data.myMsgList,
inputValue: ''
})
}
// var data = {
// body: that.data.inputValue,
// }
// if (socketOpen) {
// // 如果打开了socket就发送数据给服务器
// sendSocketMessage(data)
// this.data.allContentList.push({ is_my: { text: this.data.inputValue } });
// this.setData({
// allContentList: this.data.allContentList,
// inputValue: ''
// })
that.bottom()
// }
},
bindKeyInput: function (e) {
this.setData({
inputValue: e.detail.value
})
},
onHide: function () {
SocketTask.close(function (close) {
console.log('关闭 WebSocket 连接。', close)
})
},
upimg: function () {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'],
success: function (res) {
that.setData({
img: res.tempFilePaths
})
wx.uploadFile({
url: upload_url,
filePath: res.tempFilePaths,
name: 'img',
success: function (res) {
console.log(res)
wx.showToast({
title: '图片发送成功！',
duration: 3000
});
}
})
that.data.allContentList.push({ is_my: { img: res.tempFilePaths } });
that.setData({
allContentList: that.data.allContentList,
})
that.bottom();
}
})
},
addImg: function () {
this.setData({
addImg: !this.data.addImg
})
},
// 获取hei的id节点然后屏幕焦点调转到这个节点
bottom: function () {
var len = this.data.myMsgList.length //遍历的数组的长度
this.setData({
scrollTop: 1000 * len // 这里我们的单对话区域最高1000，取了最大值，应该有方法取到精确的
});
},
})
//通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。
function sendSocketMessage(msg) {
var that = this;
console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
SocketTask.send({
data: JSON.stringify(msg)
}, function (res) {
console.log('已发送', res)
})
}
wxss
page {
">#f2f2f2;
height: 100%;
}
.jia_img{
height: 80rpx;
90rpx;
}
.time {
text-align: center;
padding: 5rpx 20rpx 5rpx 20rpx;
200rpx;
font-size: 26rpx;
">#E8E8E8;
}
.tab{
bottom: 120rpx;
}
.tab_1{
position: fixed;
bottom: 50rpx;
200rpx;
font-size: 26rpx;
left: 50%;
margin-left: -45rpx;
height: 100rpx;
}
.tab_2{
right: 30rpx;
position: fixed;
}
/* 聊天 */
.my_right {
float: right;
margin-top: 30rpx;
position: relative;
right: 40rpx;
}
.my_audio{
height: 120rpx;
150rpx;
position: absolute;
right: 150rpx;
background: white;
top: 20rpx;
}
.my_img_bg{
height: 150rpx;
400rpx;
position: relative;
right: 0;
background: white;
top: 20rpx;
}
.you_left {
margin-top: 30rpx;
float: left;
position: relative;
left: 5rpx;
}
.new_img {
100rpx;
height: 100rpx;
border-radius: 50%;
}
.new_txt {
420rpx;
}
.new_txt_my{
border-radius: 7px;
">#fff;
margin-top: 10rpx;
padding: 0rpx 30rpx 0rpx 30rpx;
float: right;
}
.new_txt_ai{
border-radius: 7px;
">#fff;
margin-top: 10rpx;
padding: 0rpx 30rpx 0rpx 30rpx;
float: left;
}
.sanjiao {
top: 25rpx;
position: relative;
0px;
height: 0px;
border- 15rpx;
border-style: solid;
}
.my {
border-color: transparent transparent transparent #fff;
}
.you {
border-color: transparent #fff transparent transparent;
}
.sendmessage {
100%;
z-index: 2;
display: flex;
position: fixed;
bottom: 0px;
">#F4F4F6;
flex-direction: row;
height: 85rpx;
}
.voice_icon{
60rpx;
height: 60rpx;
margin: 0 auto;
padding: 10rpx 10rpx 10rpx 10rpx;
}
.voice_ing{
90%;
height: 75rpx;
line-height: 85rpx;
text-align: center;
border-radius: 15rpx;
border: 1px solid #d0d0d0;
}
.sendmessage_2 {
z-index: 1;
position: relative;
100%;
display: flex;
">#F4F4F6;
flex-direction: row;
height: 85rpx;
}
.sendmessage input {
75%;
height: 60rpx;
">white;
line-height: 60rpx;
font-size: 28rpx;
border-radius: 10rpx;
margin-top: 10rpx;
margin-left: 20rpx;
border: 1px solid #d0d0d0;
padding-left: 20rpx;
}
.sendmessage button {
border: 1px solid white;
18%;
height: 65rpx;
background: #00CC00;
color: white;
line-height: 65rpx;
margin-top: 10rpx;
font-size: 28rpx;
}
.hei{
height: 20rpx;
}
.history {
95%;
height: 91%;
padding: 20rpx 20rpx 20rpx 20rpx;
font-size: 14px;
line-height: 50rpx;
word-break: break-all;
}
.icno_kf{
position: fixed;
bottom: 160rpx;
margin: 0 auto;
text-align: center;
left: 50%;
margin-left: -40rpx;
100rpx;
height: 100rpx;
border-radius: 50%
}
.myMsg{
95%;
height: 50rpx;
/* text-align: right; */
display: flex;
flex-wrap: nowrap;
justify-content: start;
padding: 10rpx;
}
.mytext{
100%;
height: 50rpx;
text-indent:2em;
}
.userImg{
50rpx;
height: 50rpx;
}