微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能
一、服务器域名配置
配置流程

配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html
二、nginx中配置反向代理加密websocket(wss)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30s;}server { listen 80; server_name www.xxxx.cn; rewrite ^(.*)$ https://$host$1 permanent;}server { listen 443; server_name www.xxxx.cn; ssl on; root /home/wwwroot/yzcp; index index.php index.html index.htm; ssl_certificate /usr/local/nginx/conf/cert/1526060965511.pem;#这里是服务端证书路径 ssl_certificate_key /usr/local/nginx/conf/cert/1526060965511.key;#这里是密钥路径 ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; ssl_verify_client off; #隐藏index.php location / { #index index.php; deny 127.0.0.1; if (!-e $request_filename) { #一级目录 rewrite ^(.*)$ /index.php?s=$1 last; break; } #wss配置 client_max_body_size 100m; proxy_redirect off; proxy_pass http://websocket;#反向代理转发地址 proxy_set_header Host $host;# http请求的主机域名 proxy_set_header X-Real-IP $remote_addr;# 远程真实IP地址 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之后转发之前的IP地址 proxy_read_timeout 604800s;#websocket心跳时间,默认是60s proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; } location ~ .+\.php { fastcgi_pass unix:/tmp/php-cgi.sock; fastcgi_index index.php; include fastcgi_params; set $path_info ""; set $real_script_name $fastcgi_script_name; if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") { set $real_script_name $1; set $path_info $2; } fastcgi_param SCRIPT_FILENAME $document_root$real_script_name; fastcgi_param SCRIPT_NAME $real_script_name; fastcgi_param PATH_INFO $path_info; } #防盗链开始 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ .*\.(js|css)?$ { expires 12h; } access_log /home/wwwlogs/www1537ucn.log; } |
三、安装swoole
编译安装:
|
1
2
3
4
5
6
7
8
9
10
|
wget http://pecl.php.net/get/swoole-1.9.3.tgz //下载swoole tar -zvxf swoole-1.9.3.tgz //解压swoolecd swoole-1.9.3/; //进入swoole/usr/local/php54/bin/phpize; //生成configure./configure --with-php-config=/usr/local/php/bin/php-configmake && make install //安装cd /phpstudy/server/php/lib/php/extensions/no-debug-non-zts-20121212 //查看是否安转上了swoole.so (注意:此文件下边都是你安装的拓展)vim /phpstudy/server/php/etc/php.ini //在php.ini添加extension=swoole.so加入到文件最后一行lnmp restart; //重启nginx php -m; //查看phpinfo,这时候swoole拓展已经装上了 |
四、服务器端运行程序
1、创建server.php放到项目的根目录即可
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<?php//实例化一个swoole的websocket服务监听本机的9501端口$server = new swoole_websocket_server("服务器IP", 9090);//只需要绑定要监听的ip和端口。如果ip指定为127.0.0.1,则表示客户端只能位于本机才能连接,其他计算机无法连接。//端口这里指定为9090,可以通过netstat查看下该端口是否被占用。如果该端口被占用,可更改为其他端口,如9502,9503等。$server->on('open', function (swoole_websocket_server $server, $request) { echo "你好连接成功{$request->fd}\n";});$server->on('message', function (swoole_websocket_server $server, $frame) { foreach($server->connections as $key => $fd) { $user_message = $frame->data; $server->push($fd, $user_message); }});$server->on('close', function ($ser, $fd) { echo "client {$fd} closed\n";});$server->start();?> |
2、由于swoole_server只能运行在CLI模式下,所以不要试图通过浏览器进行访问,这样是无效的,我们在命令行下面执行,注意一定要找到php的绝对路径php server.php (这行代码的意思是,把程序在服务器跑起来)
注意:php server.php命令运行后,下面的黑框关闭后将无法聊天。所以一般使用命令:nohup php server.php &

五、客户端
1、网页代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>聊天</title> <style type="text/css"> #show{ width: 600px; height: 300px; overflow-y: scroll; } .my-message{ background-color: rgba(105, 105, 105, 0.64); color: #9e0505; width: 200px; float: right; padding: 10px; } .other-message{ background-color: rgba(105, 105, 105, 0.64); color: #9e0505; width: 200px; float: left; padding: 10px; } </style></head><body> <div id="show"></div> <div class="panel"> 内容:<textarea id="content"></textarea> 收信人:<input type="text" id="touser"> <input type="button" id="send-btn" value="发送"> <input type="button" id="close-btn" value="关闭"> </div></body><script src="__PUBLIC__/js/jquery-1.10.2.min.js" charset="utf-8"></script><script type="text/javascript"> $("#close-btn").click(function () { socket.close(); }) $("#send-btn").click(function () { var touser = $("#touser").val(); var content = $("#content").val(); var htmlstr = "<div><p class='my-message'>我:"+content+"</p></div>"; $("#show").append(htmlstr); socket.send(content+"@"+touser); }) socket.onmessage = function (p1) { var htmlstr = "<div><p class='other-message'>"+p1.data+"</p></div>"; $("#show").append(htmlstr); }</script></html> |
2、小程序端的代码
Uitls/websocket.js:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
function connect(user, func) { wx.connectSocket({ url: url, header: { 'content-type': 'application/json' }, success: function () { console.log('websocket连接成功~') }, fail: function () { console.log('websocket连接失败~') } }) wx.onSocketOpen(function (res) { wx.showToast({ title: 'websocket已开通~', icon: "success", duration: 2000 }) //接受服务器消息 wx.onSocketMessage(func);//func回调可以拿到服务器返回的数据 }); wx.onSocketError(function (res) { wx.showToast({ title: 'websocket连接失败,请检查!', icon: "none", duration: 2000 }) })}//发送消息function send(msg) { wx.sendSocketMessage({ data: msg });}module.exports = { connect: connect, send: send} |
JS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
// pages/socks/socks.jsconst app = getApp()var websocket = require('../../utils/websocket.js');var utils = require('../../utils/util.js');Page({ /** * 页面的初始数据 */ data: { newslist: [], userInfo: {}, scrollTop: 0, increase: false,//图片添加区域隐藏 aniStyle: true,//动画效果 message: "", previewImgList: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { var that = this if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo }) } //调通接口 websocket.connect(this.data.userInfo, function (res) { // console.log(JSON.parse(res.data)) var list = [] list = that.data.newslist list.push(JSON.parse(res.data)) that.setData({ newslist: list }) }) }, // 页面卸载 onUnload() { wx.closeSocket(); wx.showToast({ title: '连接已断开~', icon: "none", duration: 2000 }) }, //事件处理函数 send: function () { var flag = this if (this.data.message.trim() == "") { wx.showToast({ title: '消息不能为空哦~', icon: "none", duration: 2000 }) } else { setTimeout(function () { flag.setData({ increase: false }) }, 500) websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl + '" }') this.bottom() } }, //监听input值的改变 bindChange(res) { this.setData({ message: res.detail.value }) }, cleanInput() { //button会自动清空,所以不能再次清空而是应该给他设置目前的input值 this.setData({ message: this.data.message }) }, increase() { this.setData({ increase: true, aniStyle: true }) }, //点击空白隐藏message下选框 outbtn() { this.setData({ increase: false, aniStyle: true }) }, //发送图片 chooseImage() { var that = this wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths // console.log(tempFilePaths) wx.uploadFile({ filePath: tempFilePaths[0], name: 'file', headers: { 'Content-Type': 'form-data' }, success: function (res) { if (res.data) { that.setData({ increase: false }) websocket.send('{"images":"' + res.data + '","date":"' + utils.formatTime(new Date()) + '","type":"image","nickName":"' + that.data.userInfo.nickName + '","avatarUrl":"' + that.data.userInfo.avatarUrl + '"}') that.bottom() } } }) } }) }, //图片预览 previewImg(e) { var that = this //必须给对应的wxml的image标签设置data-set=“图片路径”,否则接收不到 var res = e.target.dataset.src var list = this.data.previewImgList //页面的图片集合数组 //判断res在数组中是否存在,不存在则push到数组中, -1表示res不存在 if (list.indexOf(res) == -1) { this.data.previewImgList.push(res) } wx.previewImage({ current: res, // 当前显示图片的http链接 urls: that.data.previewImgList // 需要预览的图片http链接列表 }) }, //聊天消息始终显示最底端 bottom: function () { var query = wx.createSelectorQuery() query.select('#flag').boundingClientRect() query.selectViewport().scrollOffset() query.exec(function (res) { wx.pageScrollTo({ scrollTop: res[0].bottom // #the-id节点的下边界坐标 }) res[1].scrollTop // 显示区域的竖直滚动位置 }) },}) |
WXML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!--pages/socks/socks.wxml--><view class="news" bindtap='outbtn'><view class="chat-notice" wx:if="{{userInfo}}">系统消息: 欢迎 {{ userInfo.nickName }} 加入聊天室</view><view class="historycon"><scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}"><block wx:for="{{newslist}}" wx:key> <!-- 历史消息 --><!-- <view class="chat-news"><view style="text-align: left;padding-left: 20rpx;"><image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image><text class="name">{{ item.nickName }}{{item.date}}</text></view><view class='you_left'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}"></image></block></view></view> --><view>{{item.date}}</view><!--自己的消息 --><view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}"><view style="text-align: right;padding-right: 20rpx;"><text class="name">{{ item.nickName }}</text><image class='new_img' src="{{userInfo.avatarUrl}}"></image></view><view class='my_right'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image></block></view></view><!-- 别人的消息 --><view class="chat-news" wx:else><view style="text-align: left;padding-left: 20rpx;"><image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image><text class="name">{{ item.nickName }}</text></view><view class='you_left'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image></block></view></view></block></scroll-view></view></view><view id="flag"></view><!-- 聊天输入 --><view class="message"><form bindreset="cleanInput" class="sendMessage"><input type="text" placeholder="请输入聊天内容.." value="{{massage}}" bindinput='bindChange'></input><view class="add" bindtap='increase'>+</view><button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">发送</button></form><view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}"><view class="image" bindtap='chooseImage'>相册 </view></view></view> |
WXSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
/* pages/socks/socks.wxss */page {background-color: #f7f7f7;height: 100%;}/* 聊天内容 */.news {padding-top: 30rpx;text-align: center;/* height:100%; */box-sizing:border-box;}#flag{margin-bottom: 100rpx;height: 30rpx;}.chat-notice{text-align: center;font-size: 30rpx;padding: 10rpx 0;color: #666;}.historycon {height: 100%;width: 100%;/* flex-direction: column; */display: flex;border-top: 0px;}/* 聊天 */.chat-news{width: 100%;overflow: hidden;}.chat-news .my_right {float: right;/* right: 40rpx; */padding: 10rpx 10rpx;}.chat-news .name{margin-right: 10rpx;}.chat-news .you_left {float: left;/* left: 5rpx; */padding: 10rpx 10rpx;}.selectImg{display: inline-block;width: 150rpx;height: 150rpx;margin-left: 50rpx;}.my_right .selectImg{margin-right: 80rpx;}.new_img {width: 60rpx;height: 60rpx;border-radius: 50%;vertical-align: middle;margin-right: 10rpx;}.new_txt {max-width: 300rpx;display: inline-block;border-radius: 6rpx;line-height: 60rpx;background-color: #95d4ff;padding: 5rpx 20rpx;margin: 0 10rpx;margin-left: 50rpx;}.my_right .new_txt{margin-right:60rpx;}.you{background-color: lightgreen;}.my {border-color: transparent transparent transparent #95d4ff;}.you {border-color: transparent #95d4ff transparent transparent;}.hei{margin-top: 50px;height: 20rpx;}.history {height: 100%;margin-top: 15px;padding: 10rpx;font-size: 14px;line-height: 40px;word-break: break-all;}::-webkit-scrollbar {width: 0;height: 0;color: transparent;z-index: -1;}/* 信息输入区域 */.message{position: fixed;bottom:0;width: 100%;}.sendMessage{display: block;height: 80rpx;padding: 10rpx 10rpx;background-color: #fff;border-top: 2rpx solid #eee;border-bottom: 2rpx solid #eee;z-index:3;}.sendMessage input{float:left;width: 66%;height: 100%;line-height: 80rpx;border-bottom: 1rpx solid #ccc;padding:0 10rpx;font-size: 35rpx;color: #666;}.sendMessage view{display: inline-block;width: 80rpx;height: 80rpx;line-height: 80rpx;font-size: 60rpx;text-align: center;color: #999;border: 1rpx solid #ccc;border-radius: 50%;margin-left: 10rpx;}.sendMessage button {float: right;font-size: 35rpx;}.increased{width:100%;/* height: 150rpx; */padding: 40rpx 30rpx;background-color: #fff;}.increased .image{width: 100rpx;height: 100rpx;border: 3rpx solid #ccc;line-height: 100rpx;text-align: center;border-radius: 8rpx;font-size:35rpx;}@keyframes slidedown {from {transform: translateY(0);}to {transform: translateY(100%);}}.slidedown {animation: slidedown 0.5s linear ;}.slideup {animation: slideup 0.5s linear ;}@keyframes slideup {from {transform: translateY(100%);}to {transform: translateY(0);}} |
转载:https://www.jb51.net/article/145846.htm
微信小程序实现即时通信聊天功能的实例代码的更多相关文章
- 基于vs2015 SignalR开发的微信小程序使用websocket实现聊天功能
一)前言 在微信小程上实现聊天功能,大致有三种方式:1)小程序云开发 2)购买第三方IM服务 3)使用自己的服务器自己开发. 这里重要讲使用自己的服务器自己开发,并且是基于vs的开发. 网上提供的解决 ...
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- 微信小程序之换肤的功能
pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所 ...
- 微信小程序与AspNetCore SignalR聊天实例
微信小程序与aspnetcore signalr实例 本文不对小程序与signalr做任何介绍,默认读者已经掌握 aspnetcore Signalr文档 小程序文档 写在之前 SignalR没有提供 ...
- 微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
- 微信小程序背景音频播放分享功能
如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁 ...
- 微信小程序实现连续扫码功能(uniapp)
注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...
随机推荐
- 【Luogu1344】追查坏牛奶(最小割)
[Luogu1344]追查坏牛奶(最小割) 题面 洛谷 题解 裸的最小割,但是要求边的数量最小. 怎么办呢?给每条边的权值额外加上一个很大的值就了. #include<iostream> ...
- (转)Maven学习总结(一)——Maven入门 安装使用
备注 转自: 孤傲苍狼 http://www.cnblogs.com/xdp-gacl/p/3498271.html 只为成功找方法,不为失败找借口! 1. Maven的基本概念 Maven(翻译为& ...
- LeetCode 5回文数
判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...
- 14.会场安排问题(L4)
时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 学校的小礼堂每天都会有许多活动,有时间这些活动的计划时间会发生冲突,需要选择出一些活动进行举办.小刘的工作就是安排学校 ...
- Golang的文件处理方式-常见的读写姿势
Golang的文件处理方式-常见的读写姿势 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在 Golang 语言中,文件使用指向 os.File 类型的指针来表示的,也叫做文件句柄 ...
- 金融量化分析【day110】:Pandas-DataFrame读取与写入
一.DataFrame DataFrame是一个表格型的数据结构,含有一组有序的列 DataFrame可以被看作是有Series组成的字典并且工用一个索引 1.创建方式 pd.DataFrame({' ...
- 阿里云(一)云存储OSS的命令行osscmd的安装和使用
一.安装Python 在Linux Shell里验证Python版本: $ python -V Python 2.7.10 二.安装OSScmd SDK osscmd是基于python 2.5.4(其 ...
- Spring Mvc 一个接口多个继承; (八)
在 spring 注解实现里,一个接口一般是不能多继承的! 除非在 bean 配置文件里有 针对这个 实现类的配置: <beans:bean id="icService" c ...
- Raid 磁盘阵列
raid 原理与区别 raid0至少2块硬盘.吞吐量大,性能好,同时读写,但损坏一个就完蛋 raid1至少2块硬盘.相当镜像,一个存储,一个备份.安全性比较高.但是性能比0弱 raid5至少3块硬盘. ...
- mybatis查询缓存——(十三)
1. mybatis缓存介绍 如下图,是mybatis一级缓存和二级缓存的区别图解: mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存.