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

Z时代
2024-01-10
分类：综合

本文实例为大家分享了微信小程序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;
}