1/* 2 * Copyright (c) 2022-2023 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import wifi from '@ohos.wifi'; 17import router from '@ohos.router'; 18import { resolveIP } from '../Utils/Util' 19import socket from '@ohos.net.socket'; 20import Logger from '../model/Logger' 21 22const TAG: string = '[Login]' 23 24let localAddr = { 25 address: resolveIP(wifi.getIpInfo().ipAddress), 26 family: 1, 27 port: 0 28} 29let oppositeAddr = { 30 address: '', 31 family: 1, 32 port: 0 33} 34let loginCount = 0 35 36let udp = socket.constructUDPSocketInstance() 37 38@Entry 39@Component 40struct Login { 41 @State login_feng: boolean = false 42 @State login_wen: boolean = false 43 @State user: string = '' 44 @State roomDialog: boolean = false 45 @State confirmDialog: boolean = false 46 @State ipDialog: boolean = true 47 @State warnDialog: boolean = false 48 @State warnText: string = '' 49 @State roomNumber: string = '' 50 @State receiveMsg: string = '' 51 52 bindOption() { 53 let bindOption = udp.bind(localAddr); 54 bindOption.then(() => { 55 Logger.info(TAG, 'bind success'); 56 }).catch(err => { 57 Logger.info(TAG, 'bind fail'); 58 }) 59 udp.on('message', data => { 60 Logger.info(TAG, `data:${JSON.stringify(data)}`); 61 let buffer = data.message; 62 let dataView = new DataView(buffer); 63 Logger.info(TAG, `length = ${dataView.byteLength}`); 64 let str = ''; 65 for (let i = 0;i < dataView.byteLength; ++i) { 66 let c = String.fromCharCode(dataView.getUint8(i)); 67 if (c != '') { 68 str += c; 69 } 70 } 71 if (str == 'ok') { 72 router.clear(); 73 loginCount += 1; 74 router.push({ 75 url: 'pages/Index', 76 params: { address: oppositeAddr.address, port: oppositeAddr.port, loginCount: loginCount } 77 }) 78 } 79 else { 80 this.receiveMsg = str; 81 this.confirmDialog = true; 82 } 83 }) 84 } 85 86 build() { 87 Stack({ alignContent: Alignment.Center }) { 88 Column() { 89 Text($r('app.string.MainAbility_label')) 90 .width('100%') 91 .height(50) 92 .backgroundColor('#0D9FFB') 93 .textAlign(TextAlign.Start) 94 .fontSize(25) 95 .padding({ left: 10 }) 96 .fontColor(Color.White) 97 .fontWeight(FontWeight.Bold) 98 if (!this.ipDialog) { 99 Column() { 100 Image(this.login_feng ? $r('app.media.fengziOn') : $r('app.media.wenziOn')) 101 .width(100) 102 .height(100) 103 .objectFit(ImageFit.Fill) 104 Text('用户名：' + this.user).fontSize(25).margin({ top: 50 }) 105 106 Button() { 107 Text($r('app.string.create_room')).fontSize(25).fontColor(Color.White) 108 } 109 .width('150') 110 .height(50) 111 .margin({ top: 30 }) 112 .type(ButtonType.Capsule) 113 .onClick(() => { 114 this.roomDialog = true 115 this.bindOption() 116 }) 117 }.width('90%').margin({ top: 100 }) 118 } 119 120 }.width('100%').height('100%') 121 122 if (this.confirmDialog) { 123 Column() { 124 Text('确认码：' + this.receiveMsg).fontSize(25) 125 Row() { 126 Button($r('app.string.cancel')) 127 .onClick(() => { 128 this.confirmDialog = false 129 }).backgroundColor(0xffffff).fontColor(Color.Black) 130 Button($r('app.string.confirm')) 131 .onClick(() => { 132 udp.send({ 133 data: 'ok', 134 address: oppositeAddr 135 }).then(function (data) { 136 Logger.info(TAG, `send ${JSON.stringify(data)}`); 137 }).catch(function (err) { 138 Logger.info(TAG, `send ${JSON.stringify(err)}`); 139 }) 140 router.clear() 141 loginCount += 1; 142 router.push({ 143 url: 'pages/Index', 144 params: { address: oppositeAddr.address, port: oppositeAddr.port, loginCount: loginCount } 145 }) 146 this.confirmDialog = false; 147 }).backgroundColor(0xffffff).fontColor(Color.Red) 148 }.margin({ bottom: 10 }) 149 .justifyContent(FlexAlign.SpaceAround) 150 } 151 .width('80%') 152 .height(150) 153 .margin({ top: '10%' }) 154 .backgroundColor(Color.White) 155 .border({ radius: 10, width: 3 }) 156 } 157 if (this.ipDialog) { 158 Column() { 159 Text('本地IP：' + localAddr.address).fontSize(25).margin({ top: 10 }) 160 Text('用户：' + this.user).fontSize(20).margin({ top: 10 }) 161 .bindMenu([{ 162 value: '风子', 163 action: () => { 164 this.user = '风子' 165 this.login_feng = true 166 this.login_wen = false 167 localAddr.port = 8080 168 oppositeAddr.port = 9090 169 } 170 }, 171 { 172 value: '蚊子', 173 action: () => { 174 this.user = '蚊子' 175 this.login_wen = true 176 this.login_feng = false 177 localAddr.port = 9090 178 oppositeAddr.port = 8080 179 } 180 } 181 ]) 182 TextInput({ placeholder: '请输入对端ip' }) 183 .width(200) 184 .fontSize(25) 185 .margin({ top: 10 }) 186 .onChange((value: string) => { 187 oppositeAddr.address = value; 188 }) 189 190 if (this.warnDialog) { 191 Text(this.warnText).fontSize(10).fontColor(Color.Red).margin({ top: 5 }) 192 } 193 Button($r('app.string.confirm')) 194 .fontColor(Color.Black) 195 .height(30) 196 .margin({ bottom: 10 }) 197 .onClick(() => { 198 if (this.user == '') { 199 this.warnDialog = true; 200 this.warnText = '请先选择用户'; 201 } else if (oppositeAddr.address === '') { 202 this.warnDialog = true; 203 this.warnText = '请先输入对端IP'; 204 } else { 205 this.bindOption() 206 this.ipDialog = false; 207 Logger.debug(TAG, `peer ip=${oppositeAddr.address}`); 208 Logger.debug(TAG, `peer port=${oppositeAddr.port}`); 209 Logger.debug(TAG, `peer port=${localAddr.port}`); 210 } 211 }) 212 .backgroundColor(0xffffff) 213 } 214 .width('80%') 215 .height(200) 216 .margin({ top: '10%' }) 217 .backgroundColor(Color.White) 218 .border({ radius: 10, width: 3 }) 219 } 220 if (this.roomDialog) { 221 Column() { 222 Text($r('app.string.input_roomNumber')).fontSize(25).margin({ top: 10 }) 223 TextInput() 224 .width(100) 225 .fontSize(25) 226 .margin({ top: 10 }) 227 .onChange((value: string) => { 228 this.roomNumber = value; 229 }) 230 Row() { 231 Button($r('app.string.cancel')) 232 .onClick(() => { 233 this.roomDialog = false 234 }).backgroundColor(0xffffff).fontColor(Color.Black) 235 Button($r('app.string.confirm')) 236 .onClick(() => { 237 Logger.info(TAG, `[ROOM]address=${oppositeAddr.address}`); 238 Logger.info(TAG, `[ROOM]port=${oppositeAddr.port}`); 239 /*点击确定后发送房间号，另一端开始监听*/ 240 Logger.info(TAG, `[ROOM]oppositeAddr.address=${oppositeAddr.address}`); 241 Logger.info(TAG, `[ROOM]oppositeAddr.port=${oppositeAddr.port}`); 242 Logger.info(TAG, `[ROOM]localAddr.address=${localAddr.address}`); 243 Logger.info(TAG, `[ROOM]localAddr.port=${localAddr.port}`); 244 this.bindOption() 245 udp.send({ 246 data: this.roomNumber, 247 address: oppositeAddr 248 }).then(function (data) { 249 Logger.info(TAG, `send success, data = ${JSON.stringify(data)}`); 250 }).catch(function (err) { 251 Logger.info(TAG, `send fail, err = ${JSON.stringify(err)}`); 252 }) 253 this.roomDialog = false; 254 }).backgroundColor(0xffffff).fontColor(Color.Red) 255 }.margin({ bottom: 10 }) 256 .justifyContent(FlexAlign.SpaceAround) 257 } 258 .width('80%') 259 .height(150) 260 .margin({ top: '10%' }) 261 .backgroundColor(Color.White) 262 .border({ radius: 10, width: 3 }) 263 } 264 } 265 } 266}