도움말 - 채팅방 생성 및 설치

채팅방 생성 및 설치

일반 채팅방 생성

관리 페이지의 우측 상단에 있는 채팅방 추가 버튼을 통하여, 원하는 채팅방을 생성하실 수 있습니다. 생성할 수 있는 채팅방의 수에는 별도의 제한이 걸려 있지는 않습니다. 다만 채팅방이 유챗2 운영에 지장을 초래하는 경우 채팅방이 차단 조치될 수도 있습니다.

채팅방 추가시 필요한 정보

채팅방의 아이디
- 채팅방을 구분, 관리시 필요한 정보입니다.
- 채팅방 생성후 아이디는 수정할 수 없습니다.
- 다른 채팅방의 ID와 겹치는 ID는 입력하실 수 없습니다.
채팅방의 제목
- 채팅방 접속자들에게 보여질 채팅방의 이름입니다.
- 채팅방 관리 페이지를 통해 수정하실 수 있습니다.
채팅방의 패스워드
- 채팅방 내에서 즉석으로 관리자 권한을 얻을때 사용 됩니다.
- 비밀번호를 통해 접속자 차단, 유저 IP확인, 채팅방 설정 변경등 문제를 일으킬 수 있습니다.
- 유추하기 어려운 비밀번호를 사용하시고, 유출이 되지 않도록 주의하셔야 합니다.
- 채팅방 관리 페이지를 통해 수정하실 수 있습니다

생성된 채팅방은 채팅방 목록에 추가 됩니다.

만들어진 채팅방은 퍼가기 기능을 통해 바로 자신의 사이트에 적용할 수 있습니다.

회원 연동이란?

회원 연동은 접속자의 정보를 본인의 사이트에서 가져오기 위해 필요합니다. 회원 연동으로 사이트에서 사용중인 닉네임을 바로 유챗에 들고오거나, 사이트 내의 관리자 권한등을 연동할 수 있습니다.

	회원 연동 사용안함	회원 연동 사용
필요한 언어	HTML + Javascript	HTML + Javascript + PHP, ASP등
사이트에서 사용중인 닉네임과 연동	불가	가능
사이트에서 사용중인 권한 시스템과 연동	불가	가능
닉콘, 아이콘등의 사용 가능	불가	가능
wix등 PHP 미지원 환경에서의 사용	가능	불가
접속 정보 검증 (닉네임 위조 여부, 타 사이트에서 채팅방에 접속했는지 여부)	불가	가능

단순 HTML 채팅방 설치

회원 연동이 적용되지 않은 채팅방은 퍼가기에서 나온 코드를 사이트에 적용하는것 만으로 바로 사용하실 수 있습니다. 퍼가기에서 표시된 코드를 채팅방을 보여주고픈 위치에 넣음으로서 바로 표시됩니다.

회원연동 채팅방 설치

회원 연동 채팅방은 HTML, Javascript와 함께 PHP나 Asp등의 서버측 언어가 필요합니다. 이는 접속 정보를 검증하기 위한 인증키를 만들때 쓰입니다. 현재는 PHP용 코드만을 정식 제공하고 있으나, 필요시 공지사항 게시판에서 Asp용 코드를 참고하실 수도 있습니다.

<?php

if(!function_exists('uchat_array2data')) {
    function uchat_array2data($arr) {
        $arr['time'] = time();
        ksort($arr);
        $arr = array_filter($arr);
        $arr['hash'] = md5(implode($arr['token'], $arr));
        unset($arr['token']);
        foreach ($arr as $k => &$v){ $v = $k.' '.urlencode($v); }
        return implode("|", $arr);
    }
}

$joinData = array();

$joinData['room'] = '방 ID';
$joinData['token'] = '토큰';
$joinData['nick'] = '닉네임';
$joinData['id'] = '아이디';
$joinData['level'] = '레벨';
$joinData['auth'] = ''; // (admin, subadmin, member, guest)중 하나선택, 미선택시 자동(권장)
$joinData['icons'] = '아이콘주소';
$joinData['nickcon'] = '닉콘주소';
$joinData['other'] = '';

?>

<script async src="//client.uchat.io/uchat.js"></script>

<u-chat room='<?php echo $joinData["room"];?>' user_data='<?php echo uchat_array2data($joinData); ?>' style="display:inline-block; width:500px; height:500px;"></u-chat>;

위의 샘플 PHP 코드에서 $joinData 배열의 값을 바꾸는것으로 채팅방 접속 정보를 설정할 수 있습니다. 예를들어, $joinData['nick'] = $member['username']; 으로 수정을 했을때 채팅방 접속시의 닉네임은 $member['username']의 값으로 설정됩니다.

접속 정보

접속 정보는 회원 연동이 적용된 채팅방에서 사용할 수 있습니다. 접속 정보를 이용하여 유챗은 접속자의 정보를 판단, 처리합니다. 접속 정보 값에 특문이나 공백(띄어쓰기)가 포함될 경우, 프로토콜 오류와 같은 문제가 발생할 수도 있습니다.

room

접속할 방의 ID입니다.

예) ["room"] = "room-id";

token

접속할 방의 토큰값입니다. 접속 정보를 검증할 때 사용됩니다. 유챗에서 제공한 토큰값만을 사용해야 합니다.

예) ["token"] = "1234asdf1234asdf1324asdf";

nick

접속자의 닉네임 입니다. 특수문자나 공백이 들어갈 경우, 문제가 발생할 수 있으니 유의하시길 바랍니다.

예) ["nick"] = "닉네임";

id

접속자의 아이디입니다. 회원차단, 채팅금지, 권한 부여때 사용됩니다. 유챗은 접속 ID를 이용한 회원차단, 권한 부여 시스템이 있으며, 채팅차단, 채팅 금지 로그에서 차단 명령을 내린 ID와 피 차단자의 ID를 확인하실 수 있습니다.

예) ["id"] = "loginID"

level

접속자의 레벨입니다. 레벨 값에는 숫자 값 만이 들어가야 합니다. 기능 권한 설정에서 레벨기반 권한 허용시 사용됩니다.

예) ["level"] = 5;

auth

접속자의 권한입니다. 값은 admin, subadmin, member, guest중 하나여야 합니다. 각각 최고관리자, 부관리자, 회원, 손님 권한을 나타냅니다. 지정되지 않을 경우 member또는 guest의 권한이 자동 부여됩니다.

예) ["auth"] = "member";

icons

접속자의 닉네임 앞, 뒤에 표시될 아이콘입니다. 콤마를 이용하여 여러 아이콘을 열거하실 수 있으며, @을 기준으로 닉네임 앞, 뒤에 아이콘을 지정하실 수 있습니다. 아이콘에 별도의 크기 제한은 있지 않습니다.

예) ["icons"] = "닉네임앞1,png,닉네임앞2.png@닉네임뒤.png";

nickcon

닉네임 대신에 표시될 아이콘입니다. 값이 지정되어 있을 경우, 닉네임 대신에 설정된 이미지가 표시됩니다.

예) ["nickcon"] = "닉네임 대신 표시될 아이콘.png";

아래는 PHP를 이용해서 접속 데이터를 수정할때의 예 입니다.

배열 ID	설명	예 (그누보드)
$joinData['room']	접속할 방 ID입니다.	-
$joinData['token']	접속할 방의 토큰값입니다. 접속 정보를 검증할때 쓰입니다.	-
$joinData['nick']	접속자의 닉네임을 설정합니다	$joinData['nick'] = `$member['nickname'];`
$joinData['id']	접속자의 ID를 설정합니다. 회원 차단, 채금, 권한 부여때 쓰입니다.	$joinData['id'] = `$member['mb_id'];`
$joinData['level']	접속자의 레벨을 설정합니다. 기능 권한 설정에서 쓰입니다.	$joinData['level'] = `$member['level']`
$joinData['auth']	접속자의 권한을 설정합니다. 값은 admin(최고관리자), subadmin(부관리자), member(일반 회원), guest(비회원 - 손님) 중 하나 입니다.	`if($member['level'] == 10) $joinData['auth'] = 'subadmin'; else $joinData['auth'] = 'member';`
$joinData['icons']	닉네임 앞에 표시될 아이콘을 설정합니다. 쉼표(콤마)를 이용하여 나열할 수도 있습니다. @ 을 닉네임으로 생각하여 닉네임 뒤에 아이콘을 표시할 수도 있습니다.	$joinData['icons'] = `'/img/1.jpg,http://example.org/1.png@/닉네임-뒤에-표시될-이미지'`
$joinData['nickcon']	닉네임 대신 표시될 아이콘을 설정합니다. 이 값이 있을 경우, 닉네임이 표시되지 않으며, 대신 설정된 아이콘이 표시돕니다.	$JoinData['nickon'] = `'/img/1test';`

채팅방 크기 설정

채팅방의 크기는 <u-chat> 태그의 크기에 따라 자동으로 변합니다. <u-chat> 태그의 스타일을 수정함으로서 채팅방의 크기를 조절할 수 있습니다.

<u-chat room='<?php echo $joinData["room"];?>' user_data='<?php echo uchat_array2data($joinData); ?>' style="display:inline-block; width:500px; height:600px; "></u-chat>;

width: 500px의 500px를 30%, 100vw나 150px등 적절한 값으로 바꿈으로서 가로 길이를 설정할 수 있고, height: 600px의 600px를 50%, 60%, 또는 150px등의 적절한 값으로 바꿈으로서 세로 길이를 설정할 수 있습니다. 길이를 너무 짧게 설정할 경우 채팅방이 정상적으로 표시 되지 않을 수 있습니다.

기타 사항

유챗은 비동기 로딩을 지원합니다. 더 이상 스크립트 로딩 시간동안 페이지 렌더링이 차단되는 현상이 발생하지 않습니다. 대신 API등을 사용하실때 이벤트 기반으로 코드를 작성하셔야 합니다. 자세한 사항은 API 문서를 확인해 주세요.