更新sse示例

pages.json

@@ -1101,7 +1101,7 @@
 			}
 		},
 		// #endif
-		// #ifdef APP-ANDROID
+		// #ifdef APP-ANDROID || APP-IOS
 		{
 			"path": "pages/API/connect-event-source/connect-event-source",
 			"group": "1,5,5",

pages/API/connect-event-source/connect-event-source.uvue

 <template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-	<!-- #endif -->
-		<view>
-			<page-head :title="title"></page-head>
-			<button class="button" type="primary" @click="connect">连接</button>
-			<button class="button" type="primary" @click="close">关闭</button>
-			<text style="margin: 2px; padding: 2px; border: 1px solid #000000;">{{ log }}</text>
-		</view>
-	<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				log: '',
-				title: 'sse',
-				url: 'https://request.dcloud.net.cn/api/sse/connect',
-				eventSource: null as UniEventSource | null,
-				open:false,
-				receiveMessage:false
-			}
-		},
-		unmounted() {
-			if(this.eventSource!=null){
-				this.eventSource?.close()
-			}
-		},
-		methods: {
-			connect() {
-                console.log('connect')
-				this.eventSource?.close()
-				let headers:UTSJSONObject = new UTSJSONObject()
-				headers.set("header1","value1")
-				headers.set("header2","value3")
-				this.eventSource = uni.connectEventSource({
-					url: this.url,
-					header:headers
-				} )
-				this.eventSource?.onMessage((ev) => {
-					this.log +='type:' + ev.type + '\ndata:' + ev.data + '\n\n'
-					this.receiveMessage = true
-				})
-				this.eventSource?.onOpen((ev) => {
-					this.log += 'open:' + ev.type+ '\n\n'
-					this.open = true
-				})
-				this.eventSource?.onError((ev) => {
-					this.log += 'error:' + ev.errMsg+ '\n\n'
-				})
-				console.log('connect end')
-			},
-			close() {
-				this.eventSource?.close()
-			}
-		}
-	}
-</script>
-
-<style>
-	.button {
-		margin-left: 30px;
-		margin-right: 30px;
-		margin-bottom: 15px;
-	}
+
+  <page-head :title="title"></page-head>
+	<button class="button" type="primary" @click="connect">连接</button>
+	<button class="button" type="primary" @click="close">关闭</button>
+
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+		<view>
+			<text style="width: 100%; text-align: center; margin-bottom: 5px;">
+			  显示简易操作日志(可滚动查看)
+			</text>
+			<button size="mini" @click="logList = []">清空日志</button>
+			<view style="margin-top: 10px;">
+				<view v-for="(item, index) in logList" :key="index">
+					<text style="margin-left: 20px; margin-right: 20px;">
+						{{ item }}
+					</text>
+				</view>
+			</view>
+		</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				logList: [] as string[],
+				title: 'sse',
+				url: 'https://request.dcloud.net.cn/api/sse/connect',
+				eventSource: null as UniEventSource | null,
+				open: false,
+				receiveMessage: false
+			}
+		},
+		unmounted() {
+			if (this.eventSource != null) {
+				this.eventSource?.close()
+			}
+		},
+		methods: {
+			connect() {
+				console.log('connect start')
+				uni.showLoading({
+					title: "",
+					mask: true
+				})
+				this.eventSource?.close()
+				let headers : UTSJSONObject = new UTSJSONObject()
+				headers.set("header1", "value1")
+				headers.set("header2", "value3")
+				this.eventSource = uni.connectEventSource({
+					url: this.url,
+					header: headers
+				})
+				this.eventSource?.onMessage((ev) => {
+					const log = 'onMessage callback:' + '\n' + 'type: ' + ev.type + '\n' + 'data: ' + ev.data + '\n\n'
+					this.logList.push(log)
+					this.receiveMessage = true
+					uni.hideLoading()
+				})
+				this.eventSource?.onOpen((ev) => {
+					const log = 'onOpen callback: ' + ev.type + '\n\n'
+					this.logList.push(log)
+					this.open = true
+				})
+				this.eventSource?.onError((err) => {
+          const log = `onError callback: ${err} \n\n`
+					this.logList.push(log)
+					uni.hideLoading()
+				})
+			},
+			close() {
+				this.eventSource?.close()
+				const log = 'connect close' + '\n\n'
+				this.logList.push(log)
+			}
+		}
+	}
+</script>
+
+<style>
+	.button {
+		margin-left: 30px;
+		margin-right: 30px;
+		margin-bottom: 15px;
+	}
 </style>