주석 : 일반적으로 기존 웹 페이지에 등록 된 사용자 정보는 POST 또는 AJAX를 통해 페이지에 제출됩니다. HTML5를 입력 한 후 WebSocket을 통해 데이터와 상호 작용하는 다른 방법이 있습니다. 다음에 자세히 소개하겠습니다. 알아야 할 친구는 그것을 언급 할 수 있습니다.
일반적으로 기존 웹 페이지에 등록 된 사용자 정보는 POST 또는 AJAX를 통해 페이지에 제출됩니다. HTML5 후에는 WebSocket을 통해 데이터와 상호 작용하는 다른 방법이 있습니다. WebSocket은 기존 웹 페이지가 데이터 상호 작용에 있지 않은 유연성을 가지고 있습니다. WebSocket을 통해 긴 연결을 설정 한 후 서버는 클라이언트에 데이터를 직접 보낼 수 있습니다. 각 데이터 상호 작용에 대해 많은 양의 HTTP 헤더 정보를 가져올 필요가 없습니다. WebSocket 프로토콜 자체는 두 가지 데이터 형식 텍스트와 스트림을 지원합니다. 텍스트 json을 통해 JavaScript와 상호 작용하는 것은 매우 간단합니다. JSON과 WebSocket 간의 의사 소통은 매우 편리하지만 이러한 편의성을 달성하려면 여전히 간단한 포장을해야합니다. 다행히도 다양한 플랫폼의 기존 JSON 구성 요소는 비교적 성숙합니다. JSON 데이터를 서버에 매핑하는 해당 메소드를 분석하여 수행됩니다.
다음은 Josn 및 WebSocket과 상호 작용하는 HTML5 프로세스를 반영하는 간단한 사용자 등록입니다. 캡슐화되었으므로 사용하기가 매우 편리합니다.
HTML :이 기능은 매우 간단하며 WebSocket 서비스에 연결 한 후 등록 정보가 제출됩니다. 물론,보다 유연성이 있으려면 연결 모니터링이 닫힐 때 연결 양식을 다시 열어줍니다. 특정 JS 코드는 다음과 같습니다.
함수 connect () {
채널 = 새로운 tcpChannel ();
channel.connected = function (evt) {
$ ( '#dlgconnect'). 대화 상자 ( 'close');
};
channel.dispresion = function (evt) {
$ ( '#dlgconnect'). 대화 상자 ( 'Open');
};
channel.error = function (evt) {
경고 (EVT);
};
channel.connect ($ ( '#txthost'). val ());
}
코드가 매우 간결합니까? 주된 이유는 TcpChannel이 WebSocket을 기반으로 캡슐화되기 때문입니다. 자세한 코드는 다운로드 및 이해할 수 있습니다. 연결이 성공하면 등록 양식을 입력합니다.
일부 등록 정보를 작성한 후 등록을 클릭하여 WebSocket을 통해 정보를 서버에 제출하십시오. 제출 된 JS 코드는 다음과 같습니다.
var invokeergister = {url : 'handler.onregister', 매개 변수 : {username : '', email : ', password :' '}};
함수 레지스터 () {
$ ( '#frmregister'). 양식 ( '제출', {
onsubmit : function () {
var isvalid = $ (this) .form ( 'validate');
if (isvalid) {
invokeregister.parameters = $ ( '#frmregister'). serializeobject ();
Channel.Send (vokeergister, function (결과) {
경고 (result.data);
});
}
거짓을 반환합니다.
}
});
}
확인 데이터가 성공하면 tcpChannel을 통해 메소드 호출 설명 객체를 보낼 수 있습니다. URL은 호출하도록 지정된 클래스 메소드이며 매개 변수는 메소드의 매개 변수이며 매개 변수는 복잡한 구조 유형 일 수도 있습니다. 두 번째 매개 변수는 콜백 처리입니다.
기음#이 서비스는 Beetle의 확장 처리를 기반으로하므로 코드는 매우 간단합니다. 위의 등록에 대한 논리 방법 코드는 다음과 같습니다.
공개 클래스 핸들러
{
public string onregister (문자열 사용자 이름, 문자열 이메일, 문자열 비밀번호)
{
Console.WriteLine (사용자 이름);
Console.WriteLine (이메일);
Console.WriteLine (비밀번호);
사용자 이름을 반환합니다.
}
}
이 메소드는 관련 매개 변수 만 정의하면됩니다. Beetle의 Message Extension Controller는 분석을 위해 JS가 제출 한 JSON 데이터를 자동으로 분석하고이를 관련 실행 방법에 바인딩합니다. 컨트롤러의 자세한 코드는 다운로드를 통해 얻을 수도 있습니다. 논리가 완료된 후에는 관련 WebSocket 서비스 만 간단히 열면됩니다.
{
정적 무효 메인 (String [] args)
{
Beetle.controllers.controller.register (new Handler ());
tcputils.setup ( "딱정벌레");
프로그램 서버 = 새 프로그램 ();
Server.open (8088);
Console.writeLine ( "WebSocket START@8088");
System.threading.thread.sleep (-1);
}
보호 된 재정의 void onerror (객체 발신자, ChannelerRoreVentargs e)
{
베이스.
Console.WriteLine (E.Exception.Message);
}
보호 된 재정의 void onconnected (객체 발신자, ChannelEventArgs e)
{
base.onnected (sender, e);
Console.writeLine ( "{0} Connected", e.channel.endpoint);
}
보호 된 재정의 void ondisposed (Object Sender, ChannelDisposedEventArgs e)
{
base.ondisposed (발신자, e);
console.writeLine ( "{0} 분산", e.channel.endpoint);
}
}
HTML5를 기반으로하는 이러한 종류의 WebSocket 객체 메시지 상호 작용 및 처리가 완료되며 JS 및 서비스의 데이터 상호 작용 처리를 구현하려면 소량의 코드 만 필요합니다. 이 편리한 상호 작용 함수를 달성하기 위해 다음 캡슐화를 저장할 수 없습니다. WebSocket 프로토콜 분석, 객체 JSON 처리 및 메시지 제어 분포; 관련 세부 정보를 알고 싶다면 소스 코드를 다운로드하여 볼 수 있습니다.WebSocket.server.rar (641.79 KB)