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");  
复制代码

( u6 M+ C; ?3 ~

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
4 R9 a- a6 Y+ @* r
& u4 @; d/ `) v" j5 A) ?5 F% P& M& C' p
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
      T* E8 M) h6 `9 `! w
  2.     }
    & d+ G3 |$ }& w  U6 a
  3. - J7 n# p6 D" n8 V
  4.     socket.onmessage = function(){
    & C3 Q4 |8 u  m' E* T
  5.         //在event.data消息数据7 ?& m1 ]  `- {$ T$ s
  6.     }! n1 A  {: m* z" e& O1 w
  7. 8 _+ T" f: `8 \) S0 e
  8.     socket.onclose = function(){7 M4 b4 Z9 A: x, h! I2 A
  9.         //关闭WebSocket/ e* n/ V7 R3 p2 K$ o: h: T" ?3 }
  10.     }( S* X9 J0 Q8 c8 ~  P

  11. # P5 f  _( y' }4 x
  12.     socket.onerror = function(){
    ) b( y1 b- i& r- H
  13.         //错误触发" n, f8 f. H6 i2 z7 E
  14.     }
复制代码
, I% W0 v* X: Y

5 W' H5 N& h/ Y# i

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

  1.     socket.send(message)
复制代码
: N7 o1 r( K5 [0 c! Y4 j( a

# P6 i$ S) y2 F" G+ W# j6 H& k) y" l& B4 }. N/ Q7 n: s  d. m+ }- }

代码附上：

  1. <!DOCTYPE html><html>9 I2 `6 T6 S$ N6 |. N
  2.     <head>
    8 N  F; A5 k5 a) @8 k: d
  3.         <meta charset="UTF-8">* \& _( ]+ S, ]1 F# S' o
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">$ [- Z% m! |3 d% w7 o$ S2 @
  5.         <title>WebSocket</title>/ H  Q0 h- c9 z. y+ X# _% y
  6.     </head>; i  R# Y1 P% N( T& T7 {" e
  7.     <body>
    ' [* p0 L- [1 r+ |/ O& c; w+ p
  8.     </body>
    . A" t9 J& E  d
  9.     <script>  h, P7 f+ H5 o8 k* R/ P! d1 l
  10.         var socket;- v/ Q* T  Y8 A% j1 b
  11.         if (window.WebSocket) {
    $ B0 c+ l8 t. u2 T) y3 P- b
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
    5 c( D% O/ d% Y7 Z9 Z
  13.             socket.onmessage = function(event) {
    ; V8 }1 Y$ h) f, y1 q" C' Y6 Q
  14.                 alert("Received data from websocket: " + event.data);/ Q4 C4 N; X& H' C  _. h
  15.             }
      S; o2 l' O8 }! s
  16.             socket.onopen = function(event) {/ g' z4 f' J7 f$ o3 q5 @6 u
  17.                 alert("Web Socket opened!");8 A( L& Y# h* m' y9 B  ?
  18.             };! M" y& K# g7 c" s
  19.             socket.onclose = function(event) {1 Q7 _/ a5 X) k6 G8 q! @
  20.                 alert("Web Socket closed.");
    ' d. F' T) g3 o9 g
  21.             };
    0 f" P2 s/ V7 J2 ?+ A0 D  s
  22.         } else {$ `" W5 k+ }% U- i5 o6 ]' M6 }, M: R
  23.             alert("Your browser does not support Websockets. (Use Chrome)");- Z! ]* ?4 [* k3 `7 p( F* H
  24.         }% E% U$ {2 O. {% o# w! q

  25. 0 R3 R9 L& f" R' |- H1 h; B  R+ |
  26.         function send(message) {" z; W. B- P8 ]; K6 ]9 b* Q, K' o
  27.             if (!window.WebSocket) {
    . B; p# s9 ]6 n. R0 d0 I
  28.                 return;2 D' P. Y* c5 c. ]3 i) E7 ^. J3 ]% |
  29.             }+ }1 T$ ]  W( R# F$ B
  30.             if (socket.readyState == WebSocket.OPEN) {
    / L+ i3 K9 D# d7 v" B
  31.                 socket.send(message);
    # @! a# r: G$ w$ D  X/ E
  32.             } else {
    / R5 Q2 L/ g2 y8 v
  33.                 alert("The socket is not open.");
    $ e" k) c3 P9 |4 E
  34.             }5 |4 y, V6 c. t
  35.         }! U2 N  r& f. a
  36.     </script>
    1 p1 M0 h4 C' O7 U- g  a
  37. </html>
复制代码

8 U( e  V) u  r$ _; ^! L5 G
) K9 I3 x4 N/ s& D, L' p  j# O8 e* O
2 B7 H# n* V, ]0 d



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