윈도우 + PHP 8 + unity ( 4편, 유니티와 웹소켓하라! )

독자님들 안녕하세요~ 크레이입니다.
이번 시간에는 지난 시간 다루었던 PHP 웹소켓에 이어서 ( 아래 링크 )

https://itadventure.tistory.com/629

유니티3D 게임엔진과 PHP 웹소켓 서버가 소통(통신)하는 법을 다뤄볼텐데요.

이번 내용은 유니티3D 사전 지식이 필요합니다.
유니티3D에 대한 지식을 쌓고 싶으신 분은 아래 게시글 모음의 유니티3D 영역을 참조해 주세요.

https://itadventure.tistory.com/611

그럼 한 단계씩 시작해볼까요? 레엣츠 코우~
이번 소스는 해외 유튜버 Nava 님의 게시글을 참조하여 일부 개조하였습니다.
https://www.youtube.com/watch?v=4kWCo-rE8HY&t=1s

※ 주의 : Websocket 와 Socket.IO는 다릅니다. Socket.IO 가 더 안정화된 기술인데요. 이 게시글은 Socket.IO 를 다루는 내용은 아닙니다.

---

유니티3D 프로젝트 기본 설정

---

유니티 허브에서 프로젝트를 생성해 주세요.
2D든 3D든 상관은 없는데 크레이는 3D가 편해서 3D 프로젝트로 생성하겠습니다.
컴 사양이 낮아서 그런지 생성하는데 5분 가량 걸리더군요 ㅎ..

먼저 NuGet(뉴짓) 패키지를 설치하는데요.
NuGet 는 오픈 소스 패키지를 관리하는 어마 무시하게 편리한 도구라 생각하시면 됩니다.
유니티3D 최신버전이라면 ( 2022. 3월 버전 )
어디가서 다운받을 필요없이 패키지 매니저에서 간단히 설치 가능합니다.

Window(윈도우) - Package Manager(패키지 매니저) 메뉴로 진입한 다음

팝업 창에서 '+' 아이콘을 눌러 줍시다.

그리고 Add Package from git URL ( '깃 URL'로 패키지 설치 )를 선택하시면 되는데요.

입력창에 아래 내용을 복붙(복사해서 붙여넣기 )하시면 됩니다. 그리고 Enter 타격!

https://github.com/GlitchEnzo/NuGetForUnity.git?path=/src/NuGetForUnity

그러면 설치가 금방 진행이 되고 NuGetForUnity ( 유니티를 위한 뉴짓 ) 패키지가 찬란하게 등장합니다!

이제 패키지 매니저 창을 닫으면 화면 상단에 NuGet 메뉴가 추가된 것을 보실수 있습니다.
이 것으로 NuGet 패키지 설치는 완료!

---

웹소켓 모듈 설치

---

이제 어서 어서 오픈 소스(공개 소스) 웹소켓 모듈을 설치해 보자구요.
NuGet - Manage NuGet Packages ( 뉴짓 패키지 관리 ) 메뉴를 선택하고,

팝업창의 입력란에 'WebsocketSharp' 라고 입력 후 Enter 타격!
그러면 여러 패키지들이 검색이 될텐데요.
WebSocketSharp-netstandard ( 닷넷용 웹소켓 ) 오른쪽 install(설치) 버튼을 눌러주시면 됩니다.
그러면 소리 소문 없이 설치가 후다닥 진행되는데요.

아래와 같이 버튼 이름이 uninstall(설치 제거) 로 바뀌면 정상 설치된 것이지요.

---

웹소켓 스크립트 추가 ( C# )

---

이어서  웹소켓과 통신할 C# 스크립트를 생성해 주시는데요.
관리 편의를 위해 Assets 폴더 아래 Script 폴더를 생성하고,
( 여기서부터는 유니티 기본 도구 다루는 방법 설명은 제외하였습니다. )

C# 스크립트를 하나 생성해주시는데 파일명은 WebSocketWorker 로 지어주세요.
( 파일명은 똑같이 해주셔야 합니다 )

그리고 C# 파일을 더블클릭, 비주얼 스튜디오에서 아래 소스를 입력,  Ctrl + S 로 저장해 줍니다.
스크립트 준비는 끝!

using WebSocketSharp;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class WebSocketWorker : MonoBehaviour
{
    public string url = "ws://localhost:8089";      // 웹소켓 URL
    WebSocket ws;
    string DataRecived;
    bool spacekeyPrev=false; // 한번에 여러 메시지 전송 방지

    void Start()
    {
        // 웹소켓 객체 생성
        ws = new WebSocket(url);

        // 웹소켓 서버에 연결
        ws.Connect();

        // 메시지 처리기능 정의
        ws.OnMessage += (sender, e) =>
        {
            DataRecived = e.Data;
            Debug.Log(DataRecived);
        };
    }

    void Update()
    {
        // 현재 스페이스 키 눌림 검사
        bool spacekey = Input.GetKey(KeyCode.Space); 

        // 예전과 바뀐 경우만 코드블록 처리
        if (spacekeyPrev != spacekey)
        {
            // 스페이스 키가 눌렸으면 메시지 '안녕'을 전송
            if (spacekey) ws.Send("안녕");
            // 현재 키 눌림상태 보관
            spacekeyPrev = spacekey;
        }
    }
}

---

유니티 씬에 Empty 오브젝트 생성

---

생성한 스크립트는 유니티 Scene 안에 있어야 작동이 되는데요.
형태가 있어야 할 필요는 없으니 Empty Object(빈 오브젝트)를 추가하면 됩니다.
Hierarchy (하이어라키) 창에서 SampleScene 을 마우스 우클릭 - GameObject - Create Empty 를 클릭,
빈 오브젝트를 생성한 다음에

이름을 앞과 동일하게 WebSocketWorker 라고 지어주세요.

그리고 금방 생성한 스크립트를 오른쪽 Inspector (인스펙터) 창에 드래그 해서 집어 넣어주면 되는데요.

Inspector 창이 아래와 같이 표시되었으면 제대로 된 것입니다.

이것으로 유니티는 통신 준비 끝!

---

웹소켓 서버 ( PHP ) 작동

---

이제 웹소켓 서버를 작동시켜야 하는데요.
지난 게시글에서 서버를 중지하지 않았다면 아래 부분은 진행 안하셔도 상관 없습니다.

XAMPP 패널 창에서 Apache 서버를 시작해서 아래 화면과 같이 만드신 다음에,

Window + R 를 눌러 cmd 입력,  Enter

아래 명령을 순차 입력하시면 웹소켓 서버가 작동합니다.

cd c:\xampp\htdocs
php server.php

---

유니티와 웹페이지의 실시간 소통

---

이제 유니티에서 웹소켓이 잘 작동하는지 확인해볼텐데요.
웹페이지와 유니티를 둘 다 실행해야 확인할 수 있습니다.

아래 URL 로 웹페이지를 하나 열어 주세요.

http://localhost/client.htm

그리고 유니티도 실행 버튼을 클릭해 실행해 줍니다.

이제 유니티에서 Space 키를 연타!해보세요.

그러면 웹 브라우저에 연타 횟수만큼 "안녕"이라는 채팅 메시지가 표시됩니다.

반대로 웹 브라우저의 채팅 입력란에 메시지를 입력, Enter 키를 입력해 보세요.

그러면 유니티의 콘솔란에 입력한 메시지가 표시되는 것을 확인하실 수 있습니다.
이런 기술로 유니티간에도 웹브라우저간에도 모두 소통이 되는 것이지요.
흥미롭지 않으신가요? :)

---

마무~리

---

이 소스는 어디까지나 예제 소스이기 때문에 안정적인 부분을 다루지는 않습니다.
웹소켓은 언제든 통신이 끊길 수 있는 불안 요소가 있는데요.
그럴 때마다 다시 연결해야 하는 등의 복잡한 처리가 있습니다.

사실 이보다는 좀 더 안정적인 Socket.IO 라는게 있는데 안정적 서비스를 기대하신다면 이 기술을 살펴보실 것을 추천드립니다.

오늘도 방문해 주셔서 감사합니다 :)

---

크레이의 프롤로그

---

유니티에서 웹소켓을 처음 다루어 보았는데 생각외로 한번에 잘 되어 와우! 라는 탄성이 나왔습니다.
흠 이걸로 뭘 만들까? 행복한 고민에 빠지는 크레이입니다 :)
자의에 의한 개발은 시간 부담도 없고 늘 흥미롭지요~