HTML5-WebSocket 구현 채팅방 예시

이 글에서는 주로 HTML5-WebSocket 채팅방 구현 사례를 소개하고 있는데, 관심 있는 친구들이 참고할 수 있는 내용입니다.

기존 웹페이지에서 채팅방을 구현하는 방법은 정기적으로 서버에 관련 채팅 정보를 요청하는 방식이었습니다. 그런데 html5에서 가져온 websocket 기능이 이 방식을 변경했습니다. 웹소켓을 사용하면 서버에 접속한 후 데이터 상호작용을 위해 접속을 유지할 수 있기 때문에 서버는 해당 데이터를 클라이언트에 적극적으로 보낼 수 있다. HTML5 처리를 위해서는 연결이 생성된 후 websocket의 receive 이벤트에서만 수신된 데이터를 처리하면 됩니다. 채팅방을 구현하여 서버가 클라이언트에 적극적으로 보낼 수 있는 기능을 경험해 보겠습니다.

기능

간이채팅방은 주로 다음과 같은 기능을 가지고 있습니다.

1) 회원가입

등록은 등록이 완료된 후 현재 서버의 모든 사용자 목록을 얻는 것, 현재 성공적으로 등록된 사용자를 다른 온라인 사용자에게 보내는 서비스를 포함하여 여러 가지 작업을 처리해야 합니다.

2) 메시지 보내기

서버는 현재 받은 메시지를 온라인으로 다른 사용자에게 보냅니다

3) 종료

서버에서 연결이 끊긴 사용자를 다른 사용자에게 알립니다

채팅방의 완성된 기능 미리보기는 다음과 같습니다.

C# 서버 코드

서버측 코드는 등록, 다른 사용자 확보 및 정보 전송과 같은 여러 기능에 대한 몇 가지 메소드만 정의하면 됩니다. 구체적인 코드는 다음과 같습니다.

/// <summary>

    /// Copyright © henryfan 2012        

    ///Email:   henryfan@msn.com    

    ///HomePage:    http://www.ikende.com       

    ///CreateTime:  2012/12/7 21:45:25

    /// </summary>

    class Handler

    {

        public long Register(string name)

        {

            

            TcpChannel channel = MethodContext.Current.Channel;

            Console.WriteLine("{0} register name:{1}", channel.EndPoint, name);

            channel.Name = name;

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = name;

            user.ID = channel.ClientID;

            user.IP = channel.EndPoint.ToString();

            channel.Tag = user;

            msg.type = "register";

            msg.data = user;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    item.Send(msg);

            }

            return channel.ClientID;

        }

        public IList<User> List()

        {

            TcpChannel channel = MethodContext.Current.Channel;

            IList<User> result = new List<User>();

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    result.Add((User)item.Tag);

            }

            return result;

        }

        public void Say(string Content)

        {

            TcpChannel channel = MethodContext.Current.Channel;

            JsonMessage msg = new JsonMessage();

            SayText st = new SayText();

            st.Name = channel.Name;

            st.ID = channel.ClientID;

            st.Date = DateTime.Now;

            st.Content = Content;

            st.IP = channel.EndPoint.ToString();

            msg.type = "say";

            msg.data = st;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                item.Send(msg);

            }
        }
    }

위의 심플코드만 있으면 채팅방 서버 기능을 완료할 수 있으며, 사용자 종료의 경우 접속 해제 이벤트가 가능합니다. 특정 코드를 처리하는데 사용됩니다:

protected override void OnDisposed(object sender, ChannelDisposedEventArgs e)

        {

            base.OnDisposed(sender, e);

            Console.WriteLine("{0} disposed", e.Channel.EndPoint);

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = e.Channel.Name;

            user.ID = e.Channel.ClientID;

            user.IP = e.Channel.EndPoint.ToString();

            msg.type = "unregister";

            msg.data = (User)e.Channel.Tag;

            foreach (TcpChannel item in this.Server.GetOnlines())

            {

                if (item != e.Channel)

                    item.Send(msg);

            }

        }

이렇게 채팅 서버 코드가 완성되었습니다.

JavaScript 코드

html5 코드를 작성하려면 먼저 서버에 접속해야 합니다. 해당 javascript 코드는 다음과 같습니다.

function connect() {

            channel = new TcpChannel();

            channel.Connected = function (evt) {

                callRegister.parameters.name = $('#nikename').val();

                channel.Send(callRegister, function (result) {

 

                    if (result.status == null || result.status == undefined) {

                        $('#dlgConnect').dialog('close');

                        registerid = result.data;

                        list();

                    }

                });

 

            };

            channel.Disposed = function (evt) {

                $('#dlgConnect').dialog('open');

            };

            channel.Error = function (evt) {

                alert(evt);

            };

            channel.Receive = function (result) {

                if (result.type == "register") {

                    var item = getUser(result.data);

                    $(item).appendTo($('#lstOnlines'));

                }

                else if (result.type == 'unregister') {

                    $('#user_' + result.data.ID).remove();

                }

                else if (result.type == 'say') {

                    addSayItem(result.data);

                }

                else {

                }

            }

            channel.Connect($('#host').val());

        }

다른 메시지를 처리하려면 수신 콜백 풀 번호를 사용하세요. 다른 사용자로부터 등록 정보를 받으면 해당 사용자 정보가 목록에 추가됩니다. 사용자 목록에서 제거하면 메시지를 직접 수신하여 메시지 표시 상자에 추가할 수 있습니다. jquery를 사용하면 위의 이벤트가 매우 간단해집니다.

사용자 등록 호출 프로세스:

var callRegister = { url: 'Handler.Register', parameters: { name: ''} };

        function register() {

            $('#frmRegister').form('submit', {

                onSubmit: function () {

                    var isValid = $(this).form('validate');

                    if (isValid) {

                        connect();

                    }

                    return false;

                }

            });

        }

온라인 사용자 목록 가져오기 프로세스:

var callList = { url: 'Handler.List', parameters: {} };

        function list() {

            channel.Send(callList, function (result) {

                $('#lstOnlines').html('');

                for (var i = 0; i < result.data.length; i++) {

                    var item = getUser(result.data[i]);

                    $(item).appendTo($(&#39;#lstOnlines&#39;));

                }

            });

        }

보내기 메시지 프로세스:

var callSay = { url: 'Handler.Say', parameters: {Content:""} }

        function Say() {

            callSay.parameters.Content = mEditor.html();

            mEditor.html('');

            channel.Send(callSay);

            $('#content1')[0].focus();

        }

코드 다운로드: 데모

요약

코드 캡슐화 후 웹소켓 처리 변경 사항 매우 간단합니다. 관심이 있으시면 이 코드를 확장하여 채팅방 그룹화, 정보 전송, 사진 공유 등 더 많은 기능을 갖춘 채팅방을 만들 수 있습니다.

위 내용은 HTML5-WebSocket 구현 채팅방 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!