怎么在微信小程序中利用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
<!--pages/index/to_news/to_news.wxml-->
<view class='top-content'>
<image src='images/back.png' class='back-icon' bindtap='back'></image>
<view class="weui-cells__title" style=' display: flex;flex-direction: row;justify-content: center;margin-left:210rpx'>匿名聊天X</view>
</view>
<view class='news'>
<view class="historycon">
<scroll-view scroll-y="true" class="history">
<block wx:for="{{newsList}}" wx:key>
<!--此处为other -->
<view wx:if="{{item.type==0}}">
<view>
<text class='chat-time'>{{item.date}}</text>
</view>
<view class='other-record'>
<image class='other-head-img' src='images/headimg.png'></image>
<view class='other-record-content-triangle'></view>
<view class='other-record-content'>
{{item.message}}</view>
</view>
</view>
<!--此处为结尾 -->
<!--此处为own -->
<view wx:else>
<view>
<text class='chat-time'>{{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='images/headimg.png'></image>
</view>
</view>
<!-- own结尾 -->
</block>
</scroll-view>
</view>
</view>
<view class='hei' id="hei"></view>
<view class="sendmessage">
<input class="chat-input" type="emoji" bindinput="bindChange" confirm-type="done" value='{{input}}' placeholder="" />
<button class="btn" type="primary" plain="true" bindtap='send'>发送</button>
<input style='display:none' type="" bindinput="bindChange" confirm-type="done" placeholder="" />
</view>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;
}看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
