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;
width: 90rpx;
}
.time {
text-align: center;
padding: 5rpx 20rpx 5rpx 20rpx;
width: 200rpx;
font-size: 26rpx;
">#E8E8E8;
}
.tab{
bottom: 120rpx;
}
.tab_1{
position: fixed;
bottom: 50rpx;
width: 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;
width: 150rpx;
position: absolute;
right: 150rpx;
background: white;
top: 20rpx;
}
.my_img_bg{
height: 150rpx;
width: 400rpx;
position: relative;
right: 0;
background: white;
top: 20rpx;
}
.you_left {
margin-top: 30rpx;
float: left;
position: relative;
left: 5rpx;
}
.new_img {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
.new_txt {
width: 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;
width: 0px;
height: 0px;
border-width: 15rpx;
border-style: solid;
}
.my {
border-color: transparent transparent transparent #fff;
}
.you {
border-color: transparent #fff transparent transparent;
}
.sendmessage {
width: 100%;
z-index: 2;
display: flex;
position: fixed;
bottom: 0px;
">#F4F4F6;
flex-direction: row;
height: 85rpx;
}
.voice_icon{
width: 60rpx;
height: 60rpx;
margin: 0 auto;
padding: 10rpx 10rpx 10rpx 10rpx;
}
.voice_ing{
width: 90%;
height: 75rpx;
line-height: 85rpx;
text-align: center;
border-radius: 15rpx;
border: 1px solid #d0d0d0;
}
.sendmessage_2 {
z-index: 1;
position: relative;
width: 100%;
display: flex;
">#F4F4F6;
flex-direction: row;
height: 85rpx;
}
.sendmessage input {
width: 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;
width: 18%;
height: 65rpx;
background: #00CC00;
color: white;
line-height: 65rpx;
margin-top: 10rpx;
font-size: 28rpx;
}
.hei{
height: 20rpx;
}
.history {
width: 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;
width: 100rpx;
height: 100rpx;
border-radius: 50%
}
.myMsg{
width: 95%;
height: 50rpx;
/* text-align: right; */
display: flex;
flex-wrap: nowrap;
justify-content: start;
padding: 10rpx;
}
.mytext{
width: 100%;
height: 50rpx;
text-indent:2em;
}
.userImg{
width: 50rpx;
height: 50rpx;
}