cncml手绘网

标题: 浏览器使用WebSocket实时通讯 [打印本页]
作者: admin    时间: 2018-6-23 19:36
标题: 浏览器使用WebSocket实时通讯

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

  1. var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");  
复制代码
; ^2 v# f  S0 N* C) F2 ~

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ' K% _) M2 b5 {$ F% s2 H' S
/ Y1 M" E6 x& u1 I
  o; N9 E1 u+ x/ P! x
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
    ; Y$ q0 \, e+ [& H
  2.     }
    ( c4 x) c4 u; q' x0 o7 ]9 e$ ?

  3. . y# {4 l9 v2 L" q0 @
  4.     socket.onmessage = function(){
    7 }2 z( T# T- c  K2 W) I; ]& A
  5.         //在event.data消息数据+ x3 J7 @: r% W4 t4 D3 y$ j
  6.     }2 f( o5 [6 `2 ^1 m! i
  7. 6 k! T! }- z2 l1 S
  8.     socket.onclose = function(){
    " P+ k+ f" D+ H. E& s
  9.         //关闭WebSocket+ E; t4 J% u3 D' X
  10.     }& I7 H2 {, y" K1 j# Y

  11. 8 `' l0 S; F- L1 s3 x" u
  12.     socket.onerror = function(){
    4 A1 u: G2 J' o
  13.         //错误触发$ ]' H6 n$ J8 a! r' b: n& f5 Q
  14.     }
复制代码

' C/ a7 K0 r0 ~% X% b, {& z" w
5 Q, o* C8 ^2 \$ ]& W

通过套接口发送数据，调用socket.send:

  1.     socket.send(message)
复制代码

% g, R1 Z( n2 T5 u! ]" K! V  O0 M
" `: g# G4 v$ s3 N7 |" }# K# M0 A+ w3 Z4 \" Y& Q# w. }. f

代码附上：

  1. <!DOCTYPE html><html>
    2 d; y2 Q& e! C# s6 z0 B
  2.     <head>
    8 r: `  d3 Z% v$ ]
  3.         <meta charset="UTF-8">3 \' U# X1 ~' t7 O; a6 u" h
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    8 b: Q$ J' Q/ ]+ p1 ~
  5.         <title>WebSocket</title>
      \/ L$ M' p/ [- v8 V: O, o3 C
  6.     </head>
    4 g2 F: P8 x' h6 f4 Y
  7.     <body>8 \9 x8 S& F% `& Z+ a# O$ q4 n! c5 F
  8.     </body>& J) ^: j8 R. k. y* ^% w1 R
  9.     <script>
      \: A1 R3 t9 b
  10.         var socket;, Y6 B( j0 }( q' N
  11.         if (window.WebSocket) {
    4 W* q1 U5 }$ ~) h/ R; T: G: b
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
      M+ Y# K3 a0 c7 V' A
  13.             socket.onmessage = function(event) {0 [  h$ L9 t) C' i
  14.                 alert("Received data from websocket: " + event.data);. g$ Q# f: w& D5 T1 X
  15.             }! h" P! N' f3 p% K- J
  16.             socket.onopen = function(event) {9 h8 `+ J0 S: W. |( g- v
  17.                 alert("Web Socket opened!");
    0 f% X- K- ^! x
  18.             };
    0 e3 t7 _- S% ]' _
  19.             socket.onclose = function(event) {1 L0 V2 G, U6 W. r1 C- h
  20.                 alert("Web Socket closed.");8 D1 v( p7 X% @# m, t  w
  21.             };
    / L! V# a' g; t7 j# ]" B! _
  22.         } else {; g5 F! t  k% O: S# @- ~
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    9 @- X9 M2 u, e
  24.         }
    # ~$ R: x% N) \) p: h. |, F" n

  25. " L! P  ~* G; V6 c+ X( a& [& I' Y1 H
  26.         function send(message) {
    3 A  y  G% \, e, y
  27.             if (!window.WebSocket) {! t2 }9 [' ?1 Q5 C1 k
  28.                 return;
    / B1 n& D1 q1 g, a
  29.             }
    ( ~8 Y1 i) N/ f% @; J& d8 v
  30.             if (socket.readyState == WebSocket.OPEN) {8 H5 l  j. c/ U9 ~+ f
  31.                 socket.send(message);
    " R: E* O! q7 G8 Z& u: x' ~
  32.             } else {
    ( J7 r4 v) W) A. ^! g
  33.                 alert("The socket is not open.");% K) j) X& Q6 `: y4 f/ X) t
  34.             }
    % \3 _1 O# N0 A/ e" g% s
  35.         }
    & E1 O0 X4 Z6 Z1 F8 K3 y6 u
  36.     </script>
    * U1 I0 y% v: H6 R9 V
  37. </html>
复制代码

% Z# r& m8 L/ }. j( u) m# _2 b8 E; r/ d  n" {. I  o5 L( m8 S3 ]
  M+ g) {! x: R/ M/ W. \( {




欢迎光临 cncml手绘网 (http://bbs.cncml.com/) Powered by Discuz! X3.2