Python语言技术文档

微信小程序技术文档

php语言技术文档

jsp语言技术文档

asp语言技术文档

C#/.NET语言技术文档

html5/css技术文档

javascript

c/vc/c++语言

点击排行

微信小程序websocket实现聊天功能

来源:中文源码网    浏览: 次    日期:2018年9月2日
【下载文档:  微信小程序websocket实现聊天功能.txt 】
(友情提示:右键点上行txt文档名->目标另存为)


微信小程序websocket实现聊天功能 本文实例为大家分享了微信小程序websocket实现聊天功能的具体代码,供大家参考,具体内容如下
效果图:chat.js
var utils = require("../../utils/util.js")
Page({ /**
* 页面的初始数据
*/
data: {
newsList:[],
input:null,
openid:null
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
wx.getStorage({
key: 'OPENID',
success: function(res) {
_this.setData({
openid:res.data
})
},
})
var _this = this;
//建立连接
wx.connectSocket({
url: "wss://www.chat.blingfeng.cn/websocket/"+_this.data.openid+"/"+options.to,
}) //连接成功
wx.onSocketOpen(function () {
console.log('连接成功');
})
wx.onSocketMessage(function(res){ var list = [];
list = _this.data.newsList;
var _data = JSON.parse(res.data); list.push(_data);
console.log(list)
_this.setData({
newsList:list
}) })
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { },
send :function(){
var _this = this;
if(_this.data.input){
wx.sendSocketMessage({
data: _this.data.input,
})
var list = [];
list = this.data.newsList;
var temp = { 'message': _this.data.input, 'date': utils.formatTime(new Date()), type: 1 };
list.push(temp);
this.setData({
newsList:list,
input:null
})
} },
bindChange:function(res){
this.setData({
input: res.detail.value
})
},
back:function(){
wx.closeSocket();
console.log('连接断开');
}
})chat.wxml



匿名聊天X







{{item.date}}





{{item.message}}







{{item.date}}


{{item.message}}













chat.wxss
page {
background-color: white; } .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: 30rpx;
text-align: center;
margin-bottom: 150rpx;
} .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 {
background-color: white;
width: 100%;
position: fixed;
bottom: 0rpx;
display: flex;
flex-direction: row;
} .sendmessage input {
width: 80%;
height: 80rpx;
background-color: white;
line-height: 80rpx;
font-size: 28rpx;
border: 2rpx solid #d0d0d0;
padding-left: 20rpx;
} .sendmessage button {
border: 2rpx solid white;
width: 18%;
height: 80rpx;
background: #fff;
color: #000;
line-height: 80rpx;
font-size: 28rpx;
} .historycon {
height: 90%;
width: 100%;
flex-direction: column;
display: flex;
margin-top: 100rpx;
border-top: 0px;
}
.hei{
margin-top: 50px;
height: 20rpx;
}
.history {
height: 100%;
margin-top: 30rpx;
margin: 20rpx;
font-size: 28rpx;
line-height: 80rpx;
word-break: break-all;
}
.btn{
margin-left: 5rpx;
margin-right:4rpx;
}
.chat-input{
margin-left: 5rpx;
}
.top-content{
display: flex;
}
.back-icon{
margin-top: 25rpx;
margin-left: 25rpx;
width:40rpx;
height:40rpx;
}
.other-record-content{
background-color: #FFEFDB ;
width: 380rpx;
border-radius: 7px;
padding: 0rpx 30rpx 0rpx 30rpx;}
.other-record{ display: flex;
justify-content:flex-start;
}
.other-head-img{
width:70rpx;
height:70rpx;
margin: 10rpx 10rpx 10rpx 10rpx;
}
.other-record-content-triangle{
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-right: 40rpx solid #FFEFDB;
border-bottom: 15rpx solid transparent;
margin-top: 20rpx;
}
.own-record{
display: flex;
justify-content:flex-end;}
.own-record-content{
background-color: #F0F0F0 ;
width: 380rpx;
border-radius: 7px;
padding: 0rpx 30rpx 0rpx 30rpx;
}
.own-record-content-triangle {
width: 0;
height: 0;
border-top: 20rpx solid transparent;
border-left: 40rpx solid #F0F0F0;
border-bottom: 20rpx solid transparent;
margin-top: 20rpx;
}
.own-head-img{
width:70rpx;
height:70rpx;
margin: 10rpx 10rpx 10rpx 10rpx;
padding-right:30rpx;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}github前后端都有地址:wx-chat
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。

亲,试试微信扫码分享本页! *^_^*

精彩推荐

相关内容