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

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

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