微信小程序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

<!--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;
}

github前后端都有地址： 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。