소켓의 재미!
전통적으로 소켓 작업은 서버에서 수행되므로 소켓 작업은 프런트 엔드 코더에게 어려울 수 있습니다. Node 및 SocketIO에서 실행되는 ZIM 소켓 서버에 공통 코드를 추상화하여 ZIM을 쉽게 만들었습니다. 그런 다음 프런트 엔드에 ZIM 소켓을 제공합니다. https://zimjs.com/socket에서 코드를 받고 예제를 참조하십시오.
A. 시작하기 전에 CreateJS 및 ZIM을 가져온 다음 SocketIO 및 ZIM socket.js를 가져와야 합니다. 또한 소켓 서버가 변경될 경우를 대비하여 zimserver_urls.js도 포함합니다. 따라서 HTML 페이지의 헤드에 다음을 추가하십시오.
<script src="https://zimjs.org/cdn/1.3.2/createjs.js"></script>
<script src="https://zimjs.org/cdn/cat/03/zim_doc.js"></script>
<script src="https://zimjs.org/cdn/2.3.0/socket.io.js"></script>
<script src="https://zimjs.org/cdn/zimserver_urls.js"></script>
<script src="https://zimjs.org/cdn/zimsocket_1.1.js"></script>
B. 아래에 추가할 ZIM 템플릿은 다음과 같습니다.
<script>
var scaling = "fit";
var width = 1024;
var height = 768;
var color = darker;
var outerColor = dark;
var frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
zog("ready from ZIM Frame");
var stage = frame.stage;
var stageW = frame.width;
var stageH = frame.height;
// put your code here:
}); // end of ready
</script>
</head>
<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>
C. 공유 볼에 대한 ZIM 소켓 코드는 다음과 같습니다! 이것을 "여기에 코드 입력"아래에 추가한 다음 몇 개의 브라우저 창을 열고 하나에 공을 드래그하고 다른 하나에서 변경되는 것을 볼 수 있습니다.
// get the app name here: https://zimjs.com/request.html
var appName = "balls";
var socket = new zim.Socket(zimSocketURL, appName);
socket.on("ready", data=>{
zogg("socket connected");
const ball = new Circle(100, red)
.loc(data.ball||{x:stageW/2, y:stageH/2})
.drag();
ball.on("pressmove", ()=>{
socket.setProperty("ball", {x:ball.x, y:ball.y});
});
socket.on("data", data=>{
ball.loc(data.ball);
stage.update();
});
stage.update();
});
우리는 ZIM 소켓으로 흥미로운 것들을 많이 만들었습니다. 다음에서 예를 참조하십시오.
https://zimjs.com/socket
다음은 시도해 볼 수 있는 CodePen입니다.
https://codepen.io/danzen/pen/jOrzNyp
최근에 Canvas를 확인하지 않았다면 - 확인해야 합니다! 다음은 ZIM Dev Site 및 In-depth Guides을 포함하여 Dr Abstract의 일부Your Guide to Coding Creativity on the Canvas입니다.
Reference
이 문제에 관하여(소켓의 재미!), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zimlearn/fun-with-sockets-d2l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
