반응형
|
공감 및 댓글은 포스팅 하는데 아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께 도움이 되길 바라며 더 깔끔하고 좋은 포스팅을 만들어 나가겠습니다^^
|
이전에 자바 웹소켓으로 홈 어시스턴트 웹소켓의 데이터를 받는 방법에 대해서
알아보았는데요.
http://altongmon.tistory.com/631
이번 포스팅에서는 자바가 아닌 자바스크립트 코드로 홈 어시스턴트 웹소켓
데이터를 받는 방법에 대해서 알아봅니다.
먼저 저의 홈어시스턴트 웹소켓 주소는
ws://10.20.2.117:8123/api/websocket 입니다.
websocket.html
|
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 |
<!DOCTYPE html>
<meta charset="utf-8"/>
<title>테스트</title>
<script language="javascript" type="text/javascript">
var uri = "ws://10.20.2.117:8123/api/websocket";
var output;
function init() {
output = document.getElementById("div1");
callWebSocket();
}
function callWebSocket() {
webSocket = new WebSocket(uri);
webSocket.onopen = function(event) {
onOpen(event);
}
webSocket.onmessage = function(event){
writeToScreen('<span style="color:blue;"> receive3 :' + webSocket.readyState + '</span>');
writeToScreen('<span style="color:blue;"> receive :' + event.data + '</span>');
writeToScreen('<span style="color:blue;"> receive4 :' + webSocket.readyState + '</span>');
console.log(event.data)
};
writeToScreen('<span style="color:blue;"> receive1 :' + webSocket.readyState + '</span>');
}
function onOpen(event) {
writeToScreen("연결완료");
writeToScreen(evt.data);
writeToScreen('<span style="color:blue;"> receive2 :' + webSocket.readyState + '</span>');
webSocket.send("{\"id\": \"1\", \"type\": \"subscribe_events\", \"event_type\": \"state_changed\"}")
}
function onClose(event) {
writeToScreen("연결해제");
}
function onError(event) {
writeToScreen('<span style="color:blue;"> error :' + event.data + '</span>');
}
function doSend(message) {
writeToScreen("send :" + message);
webSocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message;
output.appendChild(pre);
}
window.addEventListener("load", init, true);
</script>
<body>
<h2>WebSocket Test</h2>
<div id ="div1"></div>
</body>
</html> |
cs |
처음 onOpen() 함수가 호출될 때
32번째 라인의 websocket.send("")을 꼭 해줘야 합니다.
webSocket.send("{\"id\": \"1\", \"type\": \"subscribe_events\",
\"event_type\": \"state_changed\"}")
그리고 성공적으로 open이 되면
onmessage에서 데이터를 받을 때마다 html 페이지에 나오게 됩니다.
event.data 에서 받은 값들이 나옵니다.
실행영상입니다.
이상입니다.
감사합니다.
반응형
'개발 etc' 카테고리의 다른 글
| 이클립스 Publishing failed with multiple errors: Could not delete .... 에러 해결 방법 (1) | 2018.06.25 |
|---|---|
| [공부] 머신러닝이란? regression, classification, supervised, unsupervised (0) | 2018.05.28 |
| 이클립스 개발 시 CSS, JS 수정 후 바로 적용 안 될 때 해결방법 (0) | 2018.04.30 |
| mysql before start of result set 에러 원인과 해결방법 (0) | 2018.04.27 |
| mysql 쿼리로 .csv 파일 추출(Export)하기 / mysql Errcode 13 Permission Denied 해결방법 (0) | 2018.04.17 |