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

一、什么是websocket：

WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议

二、websocket的原理：

websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

三、websocket与http的关系

相同点：

都是基于tcp的，都是可靠性传输协议

都是应用层协议

不同点：

WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息

HTTP是单向的

WebSocket是需要浏览器和服务器握手进行建立连接的

而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

联系：

WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的

总结（总体过程）：

首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；

然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；

最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

四、具体实现websocket聊天功能

1、服务端连接websocket，可参考官方文档

WebSocket服务器 | Swoole4 文档

<?php //创建WebSocket Server对象，监听0.0.0.0:9502端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9501);//连接redis
$redis = new Redis();
$redis->connect("127.0.0.1",6379);
$redis->auth('123456');//监听WebSocket连接打开事件
$ws->on('Open', function ($ws, $request) {echo $request->fd. "连接上了\n";
});//监听WebSocket消息事件
$ws->on('Message', function ($ws, $frame) use ($redis) {$params = json_decode($frame->data,true);print_r($params);switch ($params['type']) {//判断是谁发的消息case 'open':$redis->set($params['who'],$frame->fd);break;//判断给谁发case 'send':$to = $redis->get($params['to']);$ws->push($to,json_encode($params['msg'],true));break;case 'active':echo "这是心跳检测\n";break;default:break;}});//监听WebSocket连接关闭事件
$ws->on('Close', function ($ws, $fd) {echo "client-{$fd} is closed\n";
});$ws->start();?>

2、微信小程序端样式

<view><view class="chat"><view  wx:for="{{list}}" wx:key="list"><view class="service" wx:if="{{item.who=='service'}}"><text>{{item.msg}}</text></view><view class="client" wx:else=""><text>{{item.msg}}</text></view></view></view><view class="send"><input type="text" value="{{inputVal}}" bindblur="sendMsg" placeholder="请输入内容" /></view>
</view>

3、给页面添加样式

.chat{width: 400px;height: 600px;
}.send{width: 400px;height: 50px;
}.service{width: 390px;height: 40px;text-align: left;line-height: 40px;background-color: pink;
}.client{width: 390px;height: 40px;line-height: 40px;text-align: right;background-color: aqua;
}

4、初始化socket连接

function chat() {return new Promise(function () {wx.connectSocket({url: 'ws://ws.xxxxx.com',header: {'content-type': 'application/json'},success: (res) => {console.log("连接成功");},fail: (err) => {console.log("连接失败");}})})
}

5、心跳检测判断是否处于连接状态

function webSocketXin(time = 60000, status = true) {return new Promise(function () {let timing;if (status == true) {timing = setInterval(function () {console.log("心跳已连接");wx.sendSocketMessage({data: JSON.stringify({'type': 'active'}),fail: (res) => {clearInterval(timing);console.log("心跳已关闭");}})}, time)} else {clearInterval(timing);console.log("心跳已断开");}})
}

6、初始化页面信息

import ws from "../../untils/ws"Page({/*** 页面的初始数据*/data: {inputVal: "",list: [{"who": "service","msg": "很高兴为您服务。"}, {"who": "client","msg": "你好"}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {ws.chat();    //初始化连接ws.webSocketXin(60000, true);    //心跳检测wx.onSocketOpen((result) => {let message = {who:'client',to:"service",type:'open',}wx.sendSocketMessage({data: JSON.stringify(message),})})wx.onSocketMessage((res)=>{console.log(res.data);let result = JSON.parse(res.data);let list = this.data.list;let msg = {who:"service",msg:result,}list.push(msg)this.setData({list:list})})    },//发消息sendMsg(e) {let inputVal = e.detail.value;let that = this;let list = this.data.list;let message = {who:'client',to:"service",msg: inputVal,type:'send'}wx.sendSocketMessage({data: JSON.stringify(message),success: (res) => {ws.webSocketXin(40000, false)}})list.push(message)inputVal = "";that.setData({list,inputVal})},})

7、实现结果如图

微信小程序实现websocket及单人聊天功能相关推荐

微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能
一.文章前言此文主要实现在小程序内聊天对话功能,使用Java作为后端语言进行支持,界面友好,开发简单. 二.开发流程及工具准备 2.1.注册微信公众平台账号. 2.2.下载安装IntelliJ ID ...
java与微信小程序通讯_java与微信小程序实现websocket长连接
本文实例为大家分享了java与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容如下背景: 需要在小程序实现地图固定坐标下实时查看消息 java环境 :tomcat7 jdk1. ...
微信小程序之WebSocket
(扫码带走看 ^ ^) 本文版权归 OSChina jsongo0 所有,此处为技术收藏,如有再转请自觉标明原文出处,这是大家对原创作者劳动成果的自觉尊重! 原文地址:https://my.osch ...
微信是与服务器长连接,java与微信小程序实现websocket长连接.pdf
java与与微微信信小小程程序序实实现现websocket长长连连接接本文实例为大家分享了j ava与微信小程序实现websocket长连接的具体代码,供大家参考,具体内容下背背景景:: 需要在 ...
【微信小程序控制硬件⑧ 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！（附带Demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
微信小程序的 websocket 以及微信开发者工具测试 ws 协议没有数据的离奇解决方案记录
微信小程序的 websocket 在本地web能够使用ws协议去链接websocket,但是小程序不能使用. 一.WSS 协议与 WS 协议二.业务场景记录 : 使用 ws 协议的 websocek ...
微信小程序使用websocket
微信小程序使用websocket 连接websocket let url = `******`//websocket地址 wx.connectSocket({url: url,success() {c ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

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

一、什么是websocket：

二、websocket的原理：

三、websocket与http的关系

四、具体实现websocket聊天功能

1、服务端连接websocket，可参考官方文档

2、微信小程序端样式

3、给页面添加样式

4、初始化socket连接

5、心跳检测判断是否处于连接状态

6、初始化页面信息

7、实现结果如图

微信小程序实现websocket及单人聊天功能相关推荐

最新文章

热门文章