微信小程序websocket实现聊天功能


Posted in Javascript onMarch 30, 2020

本文实例为大家分享了微信小程序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 

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
jquery常用的12个小功能
Jul 22 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Vue中使用matomo进行访问流量统计的实现
Nov 05 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
Element Badge标记的使用方法
Jul 27 Javascript
浅谈react useEffect闭包的坑
Jun 08 Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
详解Angular如何正确的操作DOM
Jul 06 #Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 #Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 #Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 #Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 #jQuery
You might like
很好用的PHP数据库类
2009/05/27 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JS验证码实现代码
2017/09/14 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python Celery定时任务的示例
2018/03/13 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
应届生财务管理求职信
2013/11/06 职场文书
车辆安全检查制度
2014/01/12 职场文书
小学教师个人先进事迹材料
2014/05/17 职场文书
庆元旦演讲稿
2014/09/15 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
小学一年级数学教学计划
2015/01/20 职场文书
八年级数学教学反思
2016/02/17 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL