>웹 프론트엔드 >H5 튜토리얼 >웹소켓이란 무엇입니까? html5의 WebSocket에 대한 심층적인 이해

웹소켓이란 무엇입니까? html5의 WebSocket에 대한 심층적인 이해

零下一度
零下一度원래의
2017-05-08 13:46:082168검색

WebSocket이란 무엇입니까

WebSocket서버와 클라이언트는 양방향으로 통신할 수 있으며 도메인 간 통신을 허용합니다. HTTP/1.1Upgrade 메커니즘으로 지원, HTML5의 ws

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString protocols
);

WebSocket WebSocket(
  in DOMString url,
  in optional DOMString[] protocols
);
wss

WebSocket

을 통한 통신 (비암호화) 또는

(암호화) 프로토콜

🎜>HTML5클라이언트 <a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API<code><a href="http://www.php.cn/js/js-weixinapp-api.html" target="_blank">API</a>에만 집중하세요. code>, 그리고 서버측에서는 각 언어가

// 创建一个Socket实例
var socket = new WebSocket(&#39;ws://localhost:8080&#39;);
// 打开Socket 
socket.onopen = function(event){
  // 发送一个初始化消息
  socket.send(&#39;I am the client and I\&#39;m listening!&#39;);
  // 监听消息
  socket.onmessage = function(event){
    console.log(&#39;Client received a message&#39;,event);
  };
  // 监听Socket的关闭
  socket.onclose = function(event){
    console.log(&#39;Client notified socket has closed&#39;,event);
  };
  // 关闭Socket.... 
  //socket.close()
};

이벤트
onclose onerror onmessage onopen

속성

  • : readyState CONNECTING  0 OPEN  1 CLOSING 2CLOSED  3

  • : binaryType String <a href="http://www.php.cn/wiki/58.html" target="_blank">배열<code>Blob 버퍼<a href="http://www.php.cn/wiki/58.html" target="_blank">Array</a>Buffer

호환성

방법 1:클라이언트가
을 지원하지 않는 경우 다음을 수행할 수 있습니다. 여러 후보 옵션 사용WebSocket Flash Socket AJAX long-polling AJAX multipart streaming <a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON<code>IFrame P 폴링<a href="http://www.php.cn/wiki/1488.html" target="_blank">JSON</a>P polling

방법 2
를 사용하여 차이점을 완화합니다. 이 라이브러리는 브라우저가 Socket.io을 지원하지 않는 경우 자동으로 브라우저 지원을 사용할 수 있습니다. 또한 라이브러리는 연결이 끊어졌는지 여부를 감지하고 연결이 끊어지면 자동으로 다시 연결합니다. WebSocket

// 创建Socket.IO实例,建立连接
var socket= new io.Socket(&#39;localhost&#39;,{
  port: 8080,
});
socket.connect();
// 添加一个连接监听器
socket.on(&#39;connect&#39;,function(){
  console.log(&#39;Client has connected to the server!&#39;);
});
// 添加一个连接监听器
socket.on(&#39;message&#39;,function(data){
  console.log(&#39;Received a message from the server!&#39;,data);
});
// 添加一个关闭连接的监听器
socket.on(&#39;disconnect&#39;,function(){
  console.log(&#39;The client has disconnected!&#39;);
});
// 通过Socket发送一条消息到服务器
function sendMessageToServer(message){
  socket.send(message);
}

장점

  • 실시간 양방향 소통

  • 브라우저 네이티브 지원이 좋음(호환성은 다음과 같이 사용 가능) 타사 라이브러리) 솔루션)

  • 맞춤 프로토콜 지원

실용 적용

  • 채팅방

  • 서버 메시지 푸시

  • 프론트엔드, 백엔드 실시간 시스템

참고

  • Websocket | MDN

  • HTML5 WebSocket 알아보기

  • [관련 권장사항]

1.

무료 h5 온라인 동영상 튜토리얼

2.

HTML5 정식 버전 매뉴얼

3. 원본 HTML5 비디오 튜토리얼

위 내용은 웹소켓이란 무엇입니까? html5의 WebSocket에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.