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

聊天-微信小程序websocket相关推荐

微信小程序websocket聊天前端实现
微信小程序websocket聊天前端实现,可以发语音.图片.文字. 代码下载:https://download.csdn.net/download/cc1314_/10983195
微信小程序WebSocket相关问题说明
看本帖的前提是:你的WebSocket在小程序之外是正常可用的:因为WebSocket不是小程序独有的,所有大部分问题在网上是可以找到说明的,本帖只是聚合了一些小程序中使用WebSocket中遇到的问 ...
微信小程序WebSocket接口以及在小程序中的使用。
关于微信小程序WebSocket的使用一.连接wx.connectSocket 二.wx.onSocketOpen和wx.onSocketError 三.wx.onSocketMessage 四.w ...
微信小程序WebSocket心跳检测与断来重连
为什么要心跳检测使用微信小程序WebSocket时,WebSocket在一定的时间没有进行通信就会断开连接,所以需要使用心跳检测. 那么心跳检测是什么呢,心跳检测顾名思义就是和人心脏动一样,客户端在 ...
微信小程序WebSocket实现聊天对话功能完整源码
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序websocket聊天室
背景最近做了一个微信小程序的即时通讯功能,之前我也做过node.js的websocket服务,不过是在web端应用的socket.io服务.小程序本身对http.websocket等连接均有诸多限制 ...
微信小程序 WebSocket 通信 —— 在线聊天
在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的We ...
微信小程序websocket实现即时聊天
今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助. 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一 ...
微信小程序-WebSocket应用
为何有 HTTP 协议还需要 WebSocket ? Http协议有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...

聊天-微信小程序websocket

聊天-微信小程序websocket相关推荐

最新文章

热门文章