done
This commit is contained in:
pqcqaq
parent
5b63e3f1ac
commit
92182ee2db
14
README.md
14
README.md
|
|
@ -1,14 +0,0 @@
|
|||
# weapp.socket.io demo
|
||||
|
||||
本项目基于聊天室的案例演示了 [weapp.socket.io](https://github.com/wxsocketio/weapp.socket.io) 的基本用法.
|
||||
|
||||
Server 端使用的是 [socket.io](https://socket.io) 官方的 [chat demo](https://socket.io/demos/chat/), 你可以同时使用两者进行聊天测试。
|
||||
|
||||
> 默认使用了 Socket.io 官网版本
|
||||
|
||||
> 注意:
|
||||
> 因为 Server 的地址是 `HTTPS` 的, 由于小程序开发版本对域名的限制，
|
||||
> 请在 `微信开发者工具` -> `详情` 菜单中勾选 `不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书`
|
||||
|
||||
|
||||
<img src="./screenshots_1.png" width="50%">
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
const io = require('../../utils/weapp.socket.io.js')
|
||||
const { io } = require('../../utils/weapp-socket.io.js')
|
||||
|
||||
//index.js
|
||||
//获取应用实例
|
||||
|
|
@ -76,7 +76,7 @@ Page({
|
|||
lastMessageId: 'none'
|
||||
},
|
||||
|
||||
onLoad: function () {},
|
||||
onLoad: function () { },
|
||||
|
||||
/**
|
||||
* 页面渲染完成后，启动聊天室
|
||||
|
|
@ -186,8 +186,8 @@ Page({
|
|||
if (!msg) {
|
||||
return
|
||||
}
|
||||
this.socket.emit('new message', msg)
|
||||
this.pushMessage(createUserMessage(msg, this.me.nickName))
|
||||
this.socket.emit('newMessage', msg)
|
||||
this.pushMessage(createUserMessage(msg, this.me.nickName, true))
|
||||
this.setData({
|
||||
inputContent: null
|
||||
})
|
||||
|
|
@ -196,8 +196,12 @@ Page({
|
|||
createConnect: function (e) {
|
||||
this.amendMessage(createSystemMessage('正在加入群聊...'))
|
||||
|
||||
console.log("io", io);
|
||||
const socket = (this.socket = io(
|
||||
'https://socketio-chat-h9jt.herokuapp.com/'
|
||||
'http://localhost:3000/',
|
||||
{
|
||||
transports: ['websocket'],
|
||||
}
|
||||
))
|
||||
console.log('socket: ', socket)
|
||||
|
||||
|
|
@ -210,6 +214,7 @@ Page({
|
|||
})
|
||||
|
||||
socket.on('connect_error', (d) => {
|
||||
console.log(d);
|
||||
this.pushMessage(createSystemMessage(`connect_error: ${d}`))
|
||||
})
|
||||
|
||||
|
|
@ -248,35 +253,47 @@ Page({
|
|||
)
|
||||
})
|
||||
|
||||
socket.on('new message', (d) => {
|
||||
const { username, message } = d
|
||||
this.pushMessage(createUserMessage(message, username))
|
||||
socket.on('newMessage', (d) => {
|
||||
const { user, message } = d
|
||||
this.pushMessage(createUserMessage(message, user?.username || '匿名'))
|
||||
})
|
||||
|
||||
socket.on('user joined', (d) => {
|
||||
socket.on('userJoined', (d) => {
|
||||
this.pushMessage(
|
||||
createSystemMessage(`${d.username} 来了，当前共有 ${d.numUsers} 人`)
|
||||
createSystemMessage(`${d.user?.username || '某用户'} 来了`)
|
||||
)
|
||||
// 这里可以根据需要更新用户列表
|
||||
})
|
||||
|
||||
socket.on('user left', (d) => {
|
||||
socket.on('userLeft', (d) => {
|
||||
this.pushMessage(
|
||||
createSystemMessage(`${d.username} 离开了，当前共有 ${d.numUsers} 人`)
|
||||
createSystemMessage(`${d.user?.username || '某用户'} 离开了`)
|
||||
)
|
||||
// 这里可以根据需要更新用户列表
|
||||
})
|
||||
|
||||
socket.on('typing', (d) => {
|
||||
wx.setNavigationBarTitle({
|
||||
title: `${d.username} is typing...`
|
||||
title: `${d.user?.username || '某用户'} 正在输入...`
|
||||
})
|
||||
})
|
||||
|
||||
socket.on('stop typing', (d) => {
|
||||
socket.on('stopTyping', (d) => {
|
||||
wx.setNavigationBarTitle({
|
||||
title: '在线聊天室'
|
||||
})
|
||||
})
|
||||
|
||||
socket.emit('add user', this.me.nickName)
|
||||
socket.on('replay', (msg) => {
|
||||
console.log('收到 replay 事件:', msg);
|
||||
wx.showToast({
|
||||
title: `收到 replay: ${msg}`,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
// 你也可以在这里将 replay 的消息显示在界面上，如果需要的话
|
||||
});
|
||||
|
||||
socket.emit('joinRoom', 'defaultRoom', this.me.nickName)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -1,146 +1,99 @@
|
|||
/* chat.wxss */
|
||||
.page-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ebebeb;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
height: 100vh; /* 使页面占据整个屏幕高度 */
|
||||
background-color: #f7f7f7; /* 淡灰色背景 */
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
flex-grow: 1; /* 使聊天容器占据剩余的所有垂直空间 */
|
||||
padding: 20rpx;
|
||||
overflow-y: auto; /* 允许垂直滚动 */
|
||||
-webkit-overflow-scrolling: touch; /* 启用 iOS 上的惯性滚动 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 120rpx; /* 为输入框预留空间 */
|
||||
}
|
||||
|
||||
.system-message {
|
||||
font-size: 24rpx;
|
||||
color: #cecece;
|
||||
display: inline-block;
|
||||
.message {
|
||||
margin-bottom: 15rpx;
|
||||
overflow-wrap: break-word; /* 长文本自动换行 */
|
||||
}
|
||||
|
||||
.user-message {
|
||||
margin: 0 20rpx;
|
||||
text-align: left;
|
||||
font-size: 0;
|
||||
display: flex;
|
||||
align-items: flex-start; /* 昵称和内容顶部对齐 */
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 84rpx;
|
||||
height: 84rpx;
|
||||
border: #a5a5a7 1rpx solid;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
.user-message.me {
|
||||
flex-direction: row-reverse; /* 我的消息靠右显示 */
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
.user-message.other {
|
||||
flex-direction: row; /* 其他人的消息靠左显示 */
|
||||
}
|
||||
|
||||
.user-message.other .text {
|
||||
margin-left: 19rpx;
|
||||
.user-message .text {
|
||||
background-color: #fff;
|
||||
border-radius: 8rpx;
|
||||
padding: 15rpx;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
max-width: 80%; /* 限制消息宽度 */
|
||||
}
|
||||
|
||||
.user-message.other .text view {
|
||||
display: inline-block;
|
||||
.user-message.me .text {
|
||||
background-color: #dcf8c6; /* 我的消息背景色 */
|
||||
}
|
||||
|
||||
.text .nickname {
|
||||
color: #737373;
|
||||
.user-message .nickname {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.text .content {
|
||||
font-size: 34rpx;
|
||||
padding-left: 10rpx;
|
||||
position: relative;
|
||||
.user-message.me .nickname {
|
||||
text-align: right;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.text .nickname {
|
||||
font-size: 34rpx;
|
||||
.user-message.other .nickname {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.user-message.other .text .content::after,
|
||||
.user-message.other .text .content::before {
|
||||
right: 100%;
|
||||
border-right-style: solid;
|
||||
.user-message .content {
|
||||
font-size: 32rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.system-message {
|
||||
background-color: #e0e0e0;
|
||||
color: #666;
|
||||
border-radius: 8rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: center;
|
||||
margin: 10rpx auto;
|
||||
display: inline-block; /* 使其宽度适应内容 */
|
||||
}
|
||||
|
||||
.input-panel {
|
||||
height: 100rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 13rpx 20rpx 0;
|
||||
background: #f5f5f7;
|
||||
border-top: #d7d7d9 1rpx solid;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 800vw;
|
||||
background-color: #f0f0f0;
|
||||
border-top: 1px solid #ccc;
|
||||
padding: 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.send-input {
|
||||
flex: 1;
|
||||
height: 72rpx;
|
||||
background: #fff;
|
||||
border: #ddd 1rpx solid;
|
||||
border-radius: 3px;
|
||||
/* margin-right: 20rpx; */
|
||||
box-sizing: border-box;
|
||||
/* padding: 0 10rpx; */
|
||||
}
|
||||
|
||||
.me .nickname {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.text .content {
|
||||
font-size: 36rpx;
|
||||
line-height: 44rpx;
|
||||
padding: 20rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text .nickname {
|
||||
font-size: 42rpx;
|
||||
}
|
||||
|
||||
.user-message.other .text .content::before {
|
||||
top: 22rpx;
|
||||
border-right-color: #ccc;
|
||||
}
|
||||
|
||||
.user-message.other .text .content::after {
|
||||
border: 14rpx solid transparent;
|
||||
top: 23rpx;
|
||||
border-right-color: #fff;
|
||||
}
|
||||
|
||||
.input-panel {
|
||||
height: 120rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 13rpx 20rpx 0;
|
||||
background: #f5f5f7;
|
||||
border-top: #d7d7d9 1rpx solid;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.send-input {
|
||||
flex: 1;
|
||||
height: 92rpx;
|
||||
background: #fff;
|
||||
border: #ddd 1rpx solid;
|
||||
border-radius: 3px;
|
||||
/* margin-right: 20rpx; */
|
||||
box-sizing: border-box;
|
||||
/* padding: 0 10rpx; */
|
||||
}
|
||||
.input-panel .send-input {
|
||||
flex-grow: 1;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 25rpx;
|
||||
padding: 15rpx 25rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
|
@ -1,49 +1,40 @@
|
|||
{
|
||||
"description": "项目配置文件。",
|
||||
"packOptions": {
|
||||
"ignore": []
|
||||
},
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"newFeature": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.10.2",
|
||||
"appid": "wx3a918974b28755e0",
|
||||
"projectname": "socket.io-weapp-demo",
|
||||
"isGameTourist": false,
|
||||
"simulatorType": "wechat",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"condition": {
|
||||
"search": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"conversation": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"plugin": {
|
||||
"current": -1,
|
||||
"list": []
|
||||
},
|
||||
"game": {
|
||||
"currentL": -1,
|
||||
"list": []
|
||||
},
|
||||
"miniprogram": {
|
||||
"current": -1,
|
||||
"list": [
|
||||
{
|
||||
"id": -1,
|
||||
"name": "chat",
|
||||
"pathName": "pages/chat/index",
|
||||
"query": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
"description": "项目配置文件。",
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"newFeature": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
}
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.10.2",
|
||||
"appid": "wx3a918974b28755e0",
|
||||
"projectname": "socket.io-weapp-demo",
|
||||
"simulatorType": "wechat",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"condition": {
|
||||
"miniprogram": {
|
||||
"list": [
|
||||
{
|
||||
"name": "chat",
|
||||
"pathName": "pages/chat/index",
|
||||
"query": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"projectname": "socket.io-weapp-demo",
|
||||
"setting": {
|
||||
"compileHotReLoad": true,
|
||||
"urlCheck": false
|
||||
},
|
||||
"libVersion": "3.8.0"
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 199 KiB |
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,19 +0,0 @@
|
|||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
|
||||
}
|
||||
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : '0' + n
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatTime: formatTime
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
9673
utils/wx-ws.js
9673
utils/wx-ws.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
15
yarn.lock
15
yarn.lock
|
|
@ -1,15 +0,0 @@
|
|||
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||
# yarn lockfile v1
|
||||
|
||||
|
||||
debug@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
|
||||
integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
|
||||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
ms@^2.1.1:
|
||||
version "2.1.2"
|
||||
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
|
||||
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
|
||||
Loading…
Reference in New Issue