* 앞서 node.js 를 이용해 서버를 구축하였고, 이번에는 iOS의 WKWebView를 이용해 만들어진 간단한 서버와의 통신을 연습해보려한다.
* 첫 번째는 웹서버의 함수명을 그대로 가져와 해당 함수를 호출하는 방법이고, 두번재는 iOS의 URLSession.shared.dataTask() 를 이용해 통신해 보았다.
[node js 설정은 앞선 포스팅 소스코드를 이용한다.]
1. Navtive 버튼을 클릭 시 웹뷰 배경색 변경하기
1) 서버페이지에 배경색 변경 메서드를 생성한다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>앱을 만들어 보았읍니다.</title>
<style>
body {background: gray;}
</style>
</head>
<body>
<h1> 테스트 페이지에 오신걸 환영합니다!</h1>
</br></br></br>
<input type="text" name="input_box">
<input type="button" value="버튼" onclick="clickButton()">
<script>
function clickButton() {
alert("버튼을 눌렀다");
document.body.style.background = 'blue'
}
function changeBackgroundColor() {
document.body.style.background = 'yellow'
}
</script>
</body>
-
native에서 웹뷰 영역을 확인하기 위해 배경색을 바꿔줬고,
-
동작하는지를 확인하기 위해 버튼을 누르면 얼럿창이 뜨도록 해주었다.
-
changeBackgroundColor() 함수가 실행되면 배경색이 노란색으로 바뀐다.
2) Native 소스
-
웹페이지 배경색을 변경하기 위한 버튼이 필요하므로, WKWebView의 사이즈를 조정하고 가운데에 둔다.
-
UKWebView를 설정해주고, 다음과 같은 소스코드만 입력하면 된다
override func viewDidLoad() {
super.viewDidLoad()
let serverURL = URL(string: "http://localhost:3000")
let request = URLRequest(url: serverURL!)
webView.load(request)
}
// 버튼 클릭 시 호출
@IBAction func clickRequestBtn(_ sender: Any) {
webView.evaluateJavaScript("changeBackgroundColor()", completionHandler: nil)
}
- 먼저 정해진 url에 request를 날릴 URLRequest 를 생성한다.
-
그리고 @IBOutlet 으로 가져온 webview에 이 request를 담아 load 메서드를 실행한다.
-
서버 js파일의 changeBackgroundColor() 함수를 호출하는 메서드
결과 화면은 아래와 같다. 하단 버튼을 클릭하면 오른쪽과 같이 배경색상이 바뀐다.
'iOS > iOS 앱개발' 카테고리의 다른 글
| [swift] 웹통신하기 - 4. iOS -> Node.js 데이터 송수신하기 (0) | 2020.03.27 |
|---|---|
| [swift] WKWebView란 (0) | 2020.03.08 |
| [swift] 웹통신하기 - 2. 웹페이지 만들기 (0) | 2020.03.08 |
| [swift] 웹통신하기 - 1. node.js를 이용한 간단한 웹서버 구축 (0) | 2019.12.01 |
| [swift] 웹통신하기 - 0. 네트워크 기본 지식 (0) | 2019.12.01 |