聊天-微信小程序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前后端都有地址：https://github.com/itblingfeng/wx-chat
https://github.com/itblingfeng/wxchat