找网站建设都需要注意哪些,域名和服务器的关系,唐山网站建设哪家优惠,自微网站在Node栏目就讲到了Socket通信的内容#xff0c;使用Node实现Socke通信#xff0c;还使用两个流行的WebSocket 库#xff0c;ws 和 socket.io#xff0c;在小程序中的WebSocket接口和HTML5的WebSocket基本相同#xff0c;可以实现浏览器与服务器之间的全双工通信。那么本篇… 在Node栏目就讲到了Socket通信的内容使用Node实现Socke通信还使用两个流行的WebSocket 库ws 和 socket.io在小程序中的WebSocket接口和HTML5的WebSocket基本相同可以实现浏览器与服务器之间的全双工通信。那么本篇就来讲关于微信小程序实现WebSocket通信完成在线聊天。 客户端流程 这里的客户端也就是微信小程序了同时还需要使用Node搭载一个服务器WebSocket 是客服端与服务器之间专门建立的一条通道先来了解一下过程 通过 wx.connectSocket 来创建 WebSocket 连接来连接搭载好的Node服务器连接之后发送数据可以通过 wx.sendSocketMessage 可以发送数据到达客户端同时也需要监听接收来自客户端发出的消息事件可以使用 wx.onSocketMessage 知道这个流程之后来看一下服务器的搭载流程。 服务器流程 使用Node搭载服务器WebSocket 服务是建立在HTTP之上的可以通过引入 http 模块使用 http.createServer() 创建 HTTP服务器安装WebSocket库当然这里可以使用Node中net模块这里附上可供你参考的篇目 通过 WebSocket库来创建 WebSocket服务器同时还需要设置 autoAcceptConnections 对客服端发送的数据进行一个监控以及关闭连接的监控此外还可以进行其他的监控像错误以及控制台的输入等操作。 图解 用一个图来简单概述一下 下面来使用WebSokcet通信实现在线聊天那先来看看需要完成的效果内容 以上就是接下来要完成的一个场景先从小程序入手
1. 聊天界面编写 编写小程序的聊天界面这里也不再多讲主要还是讲一下注意点聊天的数据不可能是一条两条所以它应该是一个scroll-view滚动的底部的输入框是固定在底部的同时要避免底部会把最后的消息数据给遮挡了聊天数据可以数组保存然后通过wx:for渲染是左边的还是右边发出的数据可以通过wx:if来进行判断显示左边还是右边不破坏原型的DOM结构可以用block标签。 !--pages/wxchat/wxchat.wxml--!-- 聊天信息 --
view classcontentscroll-view classcontent-info scroll-y scroll-top{{scrollTop}}view classcontent-listview classcontent-li wx:for{{infoList}} wx:keyid !-- 右边 --block wx:if{{item.role self}}view classright-infoimage classmyhead src{{head.self}}/imagetext classmyinfo{{item.content}}/text/view/block!-- 左边 --block wx:elseview classleft-infoimage classmyhead src{{head.server}}/imagetext classmyinfo{{item.content}}/text/view/block/view/view/scroll-view
/view!-- 操作区 --
view classfoot-inputinput typetext classsend-input placeholder请输入聊天内容... value{{message}} bindinputhandleChange/view classsend-btn bindtaphandleSend发送/view
/view
/* pages/wxchat/wxchat.wxss */
page{height: 100%;
}
.content{height: 100%;display: flex;
}
.content-info .content-list{margin-bottom: 88rpx;
}
/* 信息 */
.content .content-info .content-list .content-li{clear: both;overflow: hidden;
}
.left-info{clear: both;margin: 20rpx 20rpx;
}
.left-info .myhead{float: left;width: 88rpx;height: 88rpx;/* background:#efefef; */
}
.left-info .myinfo{display: block;float: left;background: #75c475;max-width: 490rpx;margin-top: 10rpx;margin-left: 20rpx;padding: 10rpx 18rpx;border-radius: 20rpx;
}
.left-info::after{content:;clear: both;display: block;height: 0;visibility: hidden;
}
.right-info{clear: both;margin: 10rpx 20rpx;
}
.right-info .myinfo{display: block;float: right;background: #efefef;max-width: 490rpx;margin-top: 10rpx;margin-right: 20rpx;padding: 10rpx 18rpx;border-radius: 20rpx;
}
.right-info .myhead{float: right;width: 88rpx;height: 88rpx;/* background-color: #efefef; */
}
.right-info::after{content:;clear: both;display: block;height: 0;visibility: hidden;
}/* 底部 */
.foot-input{position: fixed;bottom: 0;border-top: 1px solid #DDDDDD;width: 750rpx;height: 88rpx;line-height: 88rpx;background: #ffffff;
}
.foot-input .send-input{float: left;width: 560rpx;max-width: 600rpx;margin: 16rpx 0 0 20rpx;padding: 0 10rpx;
}
.foot-input .send-btn{float: right;margin: 11rpx 20rpx 0 0;width: 120rpx;height: 66rpx;line-height: 66rpx;text-align: center;background: #16AA51;color: #ffffff;border-radius: 10rpx;
}2. 小程序创建服务器连接 小程序要接入WebSocketServer服务器首先要创建服务器连接可以通过wx.connectSocket() 方法来创建连接在小程序初始加载的时候就可以进行同时还可以使用 wx.showToast() 方法提示接入成功与否
/* pages/wxchat/wxchat.js*/
Page({onLoad:function(){this.createSocketServer();},// 创建服务器连接createSocketServer(){// 服务器地址开头 ws/wss url: ws://127.0.0.1:3000}// 监控接入与否wx.onSocketOpen((){// 接入成功wx.showToast({title: Socket接入成功,icon: success })// 接入问候语})// 监控信息 - 待写// wx.onSocketMessage((){ ... })// 监控关闭wx.onSocketClose((){// 服务器Socket连接关闭wx.showToast({title: Socket已关闭icon: error})})// 监控错误wx.onSocketError((err){console.log(接入异常,err);})})
3. 搭载Node服务器 - WebSocket服务器 搭载Node服务器WebSocket服务是建立在HTTP上所以需要先引用http模块创建HTTP服务器再创建WebSocket服务器在这里使用第三方的websocket库。
# 初始化 —— 在创建好的目标目录下进行初始化
npm init -y # 使用npm 安装 websocket 库
npm i websocket
# [可选] 使用 npm 安装 nodemon
npm i nodemon * 不安装运行index.js文件使用每次修改后要执行 —— node index.js * 安装运行index.js文件使用每次修改不需要手动执行
# 使用 npm 安装 moment.js —— 格式化时间
npm i moment -S
# 创建 index.js 文件进行编写代码
/* 服务器index.js文件 */ const http require(http);
const WebSocketServer require(websocket).server;
const moment require(moment)// 创建HTTP服务器
const httpServer http.createServer((req,res){res.writeHead(404);res.end();
})// 创建websocket服务器
const wsServer new WebSocketServer({httpServer,autoAcceptConnections : true // 自动接受连接
})// 监控接入
wsServer.on(connect,(connection){// 监控数据信息messageconnection.on(message,(msg){console.log( message , msg);if( msg.type utf8 ){var data {content : [自动回复] : 请等待用户接入回复...,date : moment(new Date()).format(YYYY-D-M , h:mm a)}connection.sendUTF( JSON.stringify(data) )}})// 监控关闭connection.on(close,(){console.log(Socket服务关闭);})})// 监听 3000 端口
httpServer.listen(3000,(){console.log(SERVER RUNNING ...)
})
4. 客户端发送数据信息 在input输入框中输入数据信息通过在input框中绑定bindinput来监听获取输入框中的数据将input框的value {{ message }} 便于做清空数据框操作。在点击发送按钮时将input中获取的信息通过sendSocketMessage 发送到服务器。
!--pages/wxchat/wxchat.js--
Page({data:{head:{self:https://profile.csdnimg.cn/8/D/A/2_weixin_52203618,server:https://img2.baidu.com/it/u4237756909,3713889849fm253fmtautoapp138fJPEG?w400h400},},onLoad:function(){this.createSocketServer()},// 创建服务器连接createSocketServer(){...},message:, // 待接收发送的消息// 获取Input框内的数据handleChange(opt){this.message opt.detail.value}// 发送按钮触发事件handleSend(){// 发送的内容不为空if(this.message){// 发送wx.sendSocketMessage({data : this.message})// 收集我发出的信息 - 待写}else{wx.showToast({title: 请输入聊天内容,icon: none,duration: 1000})}}
})
5. 收集发送的数据信息 通过wx.sendSocketMessage()将内容发送出去需要将内容进行一个收集收集到一个数组当中去然后在页面通过wx:for的渲染方式显示出来下面是对发送的数据信息进行收集
!--pages/wxchat/wxchat.js--
Page({data:{head:{ ... }, // 用户头像infoList:[] // 待收集数据信息},onLoad:function(){ ... },message: , // 待发送的数据信息id: 0, // 数据信息标识// 发送按钮触发事件handleSend(){if(this.message){ wx.sendSocketMessage({ data: this.message })// 收集我发出的信息var list this.data.infoListlist.push({id: this.id ,content: this.message ,role: self // 标识 —— 客户端发出 })// 更新this.setData({infoList : listmessage : // 清空输入框})// 聊天视角 - 待写}else{wx.showToast({title: 请输入聊天内容,icon: none,duration: 1000})}}
})
6. 接入服务器问候语 接入服务器之后客户端会自动发送 你好 的问候语那么message是待发送的数据信息监控客户端接入服务器的时候可以为message进行赋值再调用handSend()方法发送当然你可以调整一下handSend()方法将其作为参数这里就不做调整了那么此时message绑定在input框的value值上需要对message进行清空否则当你再次点击发送的时候没有输入任何数据也会发送 你好 的数据信息
Page({data:{ ... },onLoad:function(){ this.createSocketServer() },// 创建服务器连接createSocketServer(){wx.connectSocket({ url: ws://127.0.0.1:3000/ })// 监控接入wx.onSocketOpen(() {wx.showToast({title: Socket接入成功,icon: success}) // 接入问候语this.message 你好this.handleSend()this.message })...}
})
7. 服务器发送数据信息到客户端 客户端发送的数据信息在服务器中通过数据的监控可以知道在前面已经编写了这段
wsServer.on(connect,(connection){// 监控是否有message信息connection.on(message,(msg){console.log( message , msg);if( msg.type utf8){ var data {content: [自动回复] : 请等待用户接入回复...,date: moment(new Date()).format(YYYY-D-M , h:mm a)}connection.sendUTF( JSON.stringify(data) )}})
}) 接下来是在服务器进行发送数据到客户端那么服务器可以通过在控制台的输入发送到客户端监控控制台的输入进行获取通过sendUTF发送到客户端。
/* 服务器index.js文件 */ ...
wsServer.on(connect,(connection){// 监控是否有message信息 connection.on(message,(msg){ ... }) // 监控关闭connection.on(close,(){ ... })// 监控控制台输入process.stdin.on(data,(data){var data data.toString().trim() // 清除前后空格data {content : data,date : moment(new Date()).format(YYYY-D-M , h:mm a)}connection.sendUTF(JSON.stringify(data)); // 发送})
})
... 服务器发送数据信息到客户端那么需要在客户端进行监控数据信息
8. 客户端监控收集服务端发来的数据信息 服务器发来的数据信息在小程序客户端上需要对其进行一个数据信息的监控同时还需要将这些数据信息使用数组收集起来在页面使用wx:for渲染交互信息。
!--pages/wxchat/wxchat.js--
Page({data:{ ... },onLoad:function(){ ... },message: , // 待发送的数据信息id: 0, // 数据信息标识createSocketServer(){// 创建服务器连接 wx.connectSocket({url: ws://127.0.0.1:3000/})// 监控接入wx.onSocketOpen((){ ... })// 监控信息wx.onSocketMessage((msg){var result JSON.parse(msg.data);result.id this.id result.role Server // 标识 —— 服务端发出 // 收集var list this.data.infoListlist.push(result)// 更新this.setData({infoList : list})// 聊天视角 - 待写})}
})
9 .定位到消息处 —— 聊天视角 能够在页面上正常的渲染客户端和服务器所发出的数据信息接下来需要处理聊天视角的问题聊天界面的聊天数据随着发送的增多会是聊天界面出现滑动状态 scroll-view 那么当超出的聊天数据信息就需要定位到最底部发出消息的视角不需要手动的向下滑动到发送数据信息的位置。通过 scroll-view 的标签中的scroll-top属性同时要对每一个发送数据信息的内容高度进行计算然后进行定位那么可以对渲染的每一个 content-li 的高度进行计算。
!--pages/wxchat/wxchat.js--
Page({data: { ...scrolltop: 0 // 默认滑动定位},onLoad:function(){ ... }message: , // 待发送的数据信息id: 0, // 数据信息标识createSocketServer(){// 创建连接wx.connectSocket({ ... })// 监控接入wx.onSocketOpen((){ ... })// 监控信息wx.onSocketMessage((msg){...// 聊天视角this.rollingBottom()})},handleChange(opt){ ... },handleSend(){ if(this.message){...// 聊天视角this.rollingBottom()}else{...}},// 聊天视角调整方法rollingBottom(){wx.createSelectorQuery().selectAll(.content-li).boundingClientRect(results{ results.forEach(result{console.log(result)this.setData({scrollTop : result.bottom})})}).exec()}
})
10 .状态设置优化 当客户端点击发送数据信息服务器都会返回这个自动回复的内容显然不友好需要什么效果呢就是当服务器不在线状态时客户端发送什么服务器仅回复【自动回复】来提示客户端当前不在线如果服务器在控制台输出作出答复返回给客户端此时服务器就是在线状态那么当客户端再次发来的时候服务器就不再继续返回【自动回复】
/* 服务器index.js文件 - 完整 */ const http require(http);
const WebSocketServer require(websocket).server;
const moment require(moment)// 在线状态
let onLineStatus false // 服务器默认不在线// 创建Http服务器
const httpServer http.createServer((req,res){res.writeHead(404);res.end();
})// 创建ws服务器
const wsSercer new WebSocketServer({httpServer,autoAcceptConnections : true
})
wsSercer.on(connect,(connection){// 监控是否有message信息connection.on(message,(msg){console.log( message,msg)// if( msg.type utf8){if( msg.type utf8 !onLineStatus){var data {content: [自动回复] : 请等待用户接入回复...,date: moment(new Date()).format(YYYY-D-M , h:mm a)}connection.sendUTF( JSON.stringify(data) )}})// 监控关闭connection.on(close,(){console.log(close)})// 接收控制台输入process.stdin.on(data,(data){var data data.toString().trim() // 清除前后空格data {content : data,date : moment(new Date()).format(YYYY-D-M , h:mm a)}connection.sendUTF( JSON.stringify(data) )// 在线状态onLineStatus true})
})httpServer.listen(3000,(){console.log(SERVER RUNNING ...)
}) 以上就完成了整个使用WebSocket实现通信的代码下面来进行测试一下吧效果吧 测试效果
1. 启动服务器 node index.js / nodemon index.js 2. 刷新一下微信小程序 3. 在控制台上输入发送数据信息 4. 客户端接收并回复 以上就是这篇文章的全部内容了这里可以借用局域网的url地址更换可以实现一个简单的聊天室功能那么本篇就到这感谢大家的支持
