微信小程序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前后端都有地址：wx-chat

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