메뉴 건너뛰기

XE : Xpress Engine




웹디자인 강의

Flash [ XML 소켓 채팅 ]

2004.02.26 19:19

Fc

제가 무엇을 드릴 수 있을 까 고민하다가 xml 소켓채팅을 들고 올라와 봅니다.
xml 소켓채팅은 한번도 해본적이 없답니다.
그래서 코드도 명확하지 않답니다.
xml소켓 채팅을 해보신 분은 파일을 보시고..수정본 파일을 답글과 함께 부탁합니다.

그래서 나름대로 더 고군분투 했고..관련참조 사이트도 같이 올립니다.



자 그러면 다음의 xml소켓 프로그램 관련 사양서 잘 읽어보시고..늦었지만 모두 새해 복 많이 받으시기 바랍니다.





xml소켓채팅어플리케이션
------------------------
채팅 어플리케이션을 구현하기 위해서는 실시간으로 서버와 값을 주고받아야 하므로 서버의 소켓 프로그램을 사용해서 xml 데이터 연동을 만들어야 합니다.
xml소켓 연동은 크게 어려운 점이 아니라고 생각합니다.
현재의 이 강좌를 올리지만 저 역시 아직 한번도 채팅 어플리케이션 프로젝트를 진행한 적이 없습니다.
그리고 이 xml소켓 채팅은 조성주라는 분의 사이트 flashzoa.com의 자료실의 [ XMLSocket, C#을 이용한 플래시 채팅 시스템 ]의 내용을 참고해서 강좌를 작성한 것입니다.

제공하는 pdf파일은 flashzoa.com에서 다운로드 받은 것이므로 다른 곳에 공유한다면 반드시 출처 flashzoa.com를 밝히고 공유하시기 바랍니다.

그러면 채팅 어플리케이션을 진행합니다.

-------------------------------------------------------

우선 코드에 텍스트 필드 상속 메서드를 만들어 놓은 이유는 채팅대화상자에서 적절하게 값을 구하기 위해서입니다.

XML소켓을 통해서 채팅 어플리케이션을 구현하기 위해서는 3가지의 상황이 있음을 알아야 합니다.

1. 서버의 Socket 프로그램과 연결될 때
2. 서버의 Socket 프로그램과 종료될 때
3. 서버의 Socket 프로그램으로부터 xml 데이터를 전달 받을 때

1. 서버의 소켓 프로그램과 연결될 때는 연결됨(on connect)을 나타내는 onConnect 라는 메서드핸들이벤트를 지원하고 있습니다.
2. 서버의 소켓 프로그램과 종료될 때는 종료됨(on close)을 나타내는 onClose라는 메서드핸들이벤트를 지원하고 있습니다.
3. 서버의 소켓 프로그램으로부터 데이터를 전달 받을 때는 xml데이터를 받음을 나타내는 onXML 라는 메서드핸들이벤트를 지원하고 있습니다.

이 3가지 방식을 통해서 지속적으로 소켓과 연결되어 작동되게 됩니다.

이것을 플래시로 구현하기 위해서는 우선 XMLSocket(xml소켓)클래스에 대한 객체를 먼저 만드는것이 그 첫번째 순서입니다.

mySocket = new XMLSocket();

이제 만든 소켓 객체 mySocket를 가지고 서버의 소켓프로그램과 데이터 연동작업을 해야 합니다.
우선 연결되었을 때, 종료되었을 때, 데이터를 받았을 때에 대한 부분을 기술한 후 서버에 직접 연결을 가합니다.

mySocket.onConnect = doConnect;
mySocket.onXML = doXMLpasing;
mySocket.onClose = doClose;
mySocket.connect("127.0.0.1", 5525);

onConnect 의  doConnect 콜백함수에서 하는 일은 "127.0.0.1"이라는 서버의 소켓프로그램과 연결되었을 때..채팅을 시작하기 위한
페이지로 이동시켜주는 작업을 해야 합니다.
보통 로그인 페이지가 이에 해당됩니다.
그리고 이 onConnect 이벤트 핸들러 메서드는 콜백함수로 이벤트를 발생하게 될 때 콜백함수 doConnect에 자동으로 연결이 성공했는지
실패했는지에 대한 것을 부울형태의 매개변수를 받게 됩니다.
그래서 이 doConnect 콜백함수에서 서버의 소켓 프로그램과 연결이 성공했을 경우에는 로그인 페이지로 이동하면 코드와, 그렇지 않다면
연결이 되지 않은 페이지를 보여주는 코드를 담아야 한다. 다음과 같을 것입니다.

doConnect = function (connected)
{
        trace("asdfasdfasdf");
        if (connected)
        {
                trace("success");
                gotoAndPlay("success");
        } else
        {
                trace("!success");
                gotoAndPlay("connecting");
        }
};


그리고 onConnect 콜백함수의 매개변수가 true값일 때 플래시에서는 서버의 xml 데이터를 실시간으로 전송받을 수 있는데..
그 역할을 담당하는 이벤트 메서드가 onXML이 됩니다.
그래서 onXML에서는 서버의 소켓프로그램의 xml 데이터를 피싱해서 플래시에서 가공해서 사용할 수 있도록 적절히 데이터의 속성과
값을 추출할 수 있는 형태로 만들어서 플래시의 화면에서 보여질 수 있어야 합니다.
onXML 이벤트 핸들러 메서드 역시도 매개변수를 가지며 매개변수는 xmlObject를 가지게 됩니다.
이 xmlObject는 xml문서를 나타냅니다.
ex)

서버의 xml소켓 프로그램이 가지고 있는 xml문서가 이처럼 존재할 경우 onXML 메서드핸들러의 매개변수인 xmlObejct은 이 문서 전체를 받게 되며,
플래시내에서 이 xmlObject를 xml의 속성과 메서드를 사용해서 속성을 추출할 수 있게 됩니다.

그렇다면 onXML이벤트 핸들에 전달되는 콜백함수 doXMLpasing를 다음처럼 만들 수 있을 것입니다.

doXMLpasing = function ()
{
        trace("doXMLpasing");
        node = arguments[0].firstChild;
        user_IDs = node.attributes.user;
        conditions = node.attributes.condition;
        conversations = node.firstChild.nodeValue;
        // 파싱(분해, 분석)된 데이터를 화면에 보여줌
        switch (conditions)
        {
        case "begin" :
                // 새로운 대화 참여자가 입장하는 경우
                chatBox.text = user_IDs+"님이 새로 입장하셨습니다.n";
                break;
        case "continue" :
                // 기존의 대화 참여자가 대화를 입력하는 경우
                chatBox.text = user_IDs+"님>"+conversations+"n";
                break;
        case "end" :
                // 서버와 연결이 끊어진 경우
                chatBox.text = "서버와의 연결이 끊어졌습니다.n";
        }
        chatBox.setTextFields(chatBox.text);
        // 텍스트 필드의 가장 마지막 내용이 나타나도록 스크롤바 이동
        scrollBars.setScrollPosition(chatBox.maxscroll);
};

그리고 이제 마지막으로 서버로 값을 보내야 합니다.
서버로 값을 보내는 것은 xmlSocket에서 제공하는 send 메서드를 사용할 수 있는데..
send 메서드에는 xmlObejct를 담아서 보내야 합니다.
그래서 xmlObject는 사용자이름, 대화내용, 그리고 사용자가 기존의 사용자인지 그렇지 않으면 새로운 사용자인지를 나타내는 형태를
실시간으로 담고 있어야 합니다.
sendMessage 라는 메서드를 다음처럼 만들 수 있을 것입니다.

sendMessage = function (condition, conversation, user)
{
        // xmlMessage =  ""+msg+""
        var xmlDocument = ""+conversation+"";
        myXML = new XML();
        myXML.parseXML(xmlDocument);
        mySocket.send(myXML);
};
정리하면 다음과 같은 코드를 만들 수 있게 됩니다.


// 1프레임 코드
var TxtObj:Object = new Object();
TxtObj.initialTextField_callback = function()
{
        this.text = "";
};
TxtObj.setTextField_callback = function()
{
        this.text += arguments[0];
        trace("TextField.text = "+arguments[0]);
};
TxtObj.getTextField_callback = function()
{
        return this.text;
};
TextField.prototype.initialTextField = TxtObj.initialTextField_callback;
TextField.prototype.setTextField = TxtObj.setTextField_callback;
TextField.prototype.getTextField = TxtObj.getTextField_callback;


XMLSocket_callback = function ()
{
        mySocket = new XMLSocket();
        mySocket.onConnect = doConnect;
        mySocket.onXML = doXMLpasing;
        mySocket.onClose = doClose;
        mySocket.connect("127.0.0.1", 5525);
};
doConnect = function (connected)
{
        trace("asdfasdfasdf");
        if (connected)
        {
                trace("success");
                gotoAndPlay("success");
        } else
        {
                trace("!success");
                gotoAndPlay("connecting");
        }
};
XMLSocket_callback();
doClose = function ()
{
        trace("doClose");
        delete mySocket;
};
// 서버의 Socket 프로그램으로부터 받은 XML 데이터를 처리
doXMLpasing = function ()
{
        trace("doXMLpasing");
        node = arguments[0].firstChild;
        user_IDs = node.attributes.user;
        conditions = node.attributes.condition;
        conversations = node.firstChild.nodeValue;
        // 파싱(분해, 분석)된 데이터를 화면에 보여줌
        switch (conditions)
        {
        case "begin" :
                // 새로운 대화 참여자가 입장하는 경우
                chatBox.text = user_IDs+"님이 새로 입장하셨습니다.n";
                break;
        case "continue" :
                // 기존의 대화 참여자가 대화를 입력하는 경우
                chatBox.text = user_IDs+"님>"+conversations+"n";
                break;
        case "end" :
                // 서버와 연결이 끊어진 경우
                chatBox.text = "서버와의 연결이 끊어졌습니다.n";
        }
        chatBox.setTextFields(chatBox.text);
        // 텍스트 필드의 가장 마지막 내용이 나타나도록 스크롤바 이동
        scrollBars.setScrollPosition(chatBox.maxscroll);
};
sendMessage = function (condition, conversation, user)
{
        // xmlMessage =  ""+msg+""
        var xmlDocument = ""+conversation+"";
        myXML = new XML();
        myXML.parseXML(xmlDocument);
        mySocket.send(myXML);
};
stop();

//
---------------------------------------------------------------------------------------------------------



로그인 페이지
---------------------------------------------------------------------------------------------------------
이제 다음에 생각해야 할 것은 서버의 xml소켓 프로그램과 연결되어 연결이 성공했을 경우 이동한 페이지에 대한 프로토타입과 코드를 만드는 일입니다.
로그인은 사용자의 이름 정보를 추출하는 것이다. 사용자의 이름 정보를 위해서 사용자가 자신의 아이디 또는 닉네임을 입력하고 실 채팅으로 들어가야 하기때문에
login_ID라는 입력텍스트필드 객체가 필요하고, 다음으로 버튼을 클릭했을 때 실 채팅환경으로 이동되게 해주는 login_Button이라는 버튼이 필요하게 됩니다.

그리고 login_Button 버튼에서는 입력필드에 사용자가 아이디를 입력했는지 그렇지 않은 지를 조사해야 할 필요가 있습니다.
그렇다면 입력필드의 값이 0보다 큰 경우는 텍스트 필드가 비어있지 않다는 것을 나타내므로 다음과 같은 조건문 안에 실채팅창으로 이동하는 코드를 넣어두면 됩니다.
if (login_ID.getTextField().length>0)
{
    // go to Chating
}
getTextField()는 TextField에서 prototype를 통해서 범용상속을 받은 메서드이고, 해당 텍스트필드의 문자열값을 반환하므로
login_ID.getTextField().length라고 하게 되면 login_ID가 가진 텍스트필드의 길이를 반환하게 됩니다.

이제 이것을 토대로 다음과 같은 로그인페이지는 다음과 같은 코드를 사용할 수 있게 됩니다.
stop();
login_ID.text = "";
login_Button.onRelease = function()
{
        if (login_ID.getTextField().length>0)
        {
                trace(login_ID.getTextField().length)
                sendMessage("begin", "", login_ID.text);
                gotoAndStop("chating")
        }
}
---------------------------------------------------------------------------------------------------------



채팅 페이지
---------------------------------------------------------------------------------------------------------
채팅페이지의 프로토타입은 채팅박스와 글입력필드, 글입력시 글을 채팅박스로 보내는 버튼, 종료버튼이 필요합니다.
그래서 입력박스와 채팅박스는 각각 says, chatBox라는 텍스트필드 객체로 만들 수 있으며,
채팅박스로 보내는 버튼과 종료버튼은 각각 sendButton, outButton으로 이름지어 만들 수 있습니다.
우선 sendButton의 메서드핸들러에서는 다음과 같이 4가지의 일을 해야 합니다.

1. 입력필드에 문자열이 입력되었는지 그렇지 않은지 확인
2. 채팅박스에 입력필드의 값을 보여줌
3. 사용자 정보와 입력필드의 문자열 그리고 현재사용자가 새로운 사용자인지 아니면 기존사용자인지에 대한 구분한 후
   이 정보를 서버의 xml소켓 프로그램으로 전달해야 합니다.
4. 입력필드를 다시 깨끗이 지워줘야 합니다.

이것을 해결하기 위해서 다음과 같은 코드를 사용할 수 있습니다.
sendButton_callback = function ()
{
        // doXMLpasing = function(condition, conversation, user)
        if (says.getTextField().length>0)
        {
                chatBox.text += (says.text+"n");
                sendMessage("continues", says.text, login_ID.text);
                says.initialTextField();
        }
};

outButton 버튼에서는 sendButton과 비슷한 역할을 하지만 채팅을 종료하는 역할을 하므로,  채팅박스에 무언가 보여줄 필요가 없게 됩니다.
코드의 마지막에는 Key와 관련된 코드가 있는데 그것은 사용자가 입력필드에 대화내용을 입력 한 후 키보드의 Enter 키를 사용했을 경우의 수까지
생각해두어야 하기 때문입니다.

그래서 채팅페이지의 전체 코드는 다음과 같습니다.


var down:Boolean = false;
sendButton_callback = function ()
{
        // doXMLpasing = function(condition, conversation, user)
        if (says.getTextField().length>0)
        {
                chatBox.text += (says.text+"n");
                sendMessage("continues", says.text, login_ID.text);
                says.initialTextField();
        }
};
outButton_callback = function()
{
        says.initialTextField();
        sendMessage("end", "", login_ID.text);
        gotoAndstop("login")
}
// Key ================================
onKeyDown_callBack = function ()
{
        if (Key.isDown(Key.ENTER))
        {
                if (says.getTextField().length>0)
                {
                        down = true;
                        chatBox.text += (says.getTextField()+"n");
                }
        }
};
onKeyUp_callBack = function ()
{
        if (down)
        {
                says.initialTextField();
                down = false;
        }
};
// Key ================================
// ====================================
sendButton.onRelease = sendButton_callback;
outButton.onRelease = outButton_callback;
this.onKeyDown = onKeyDown_callBack;
this.onKeyUp = onKeyUp_callBack;
Key.addListener(this);

---------------------------------------------------------------------------------------------------------



  
관련 URL : flashzoa.com/





----------------------------------------------
[Fc]
+I'm from your friendsofed Fc
+http://www.ysbn200.com
+http://www.flashconference.co.kr
+한국 플래시컨퍼런스 코리아
+jk9089@hanafos.com