cncml手绘网

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

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

  1. <font color="rgb(0, 0, 136)">var</font> socket = <font color="rgb(0, 0, 136)">new</font> WebSocket(<font color="rgb(0, 153, 0)">"ws://172.0.0.1:8080/SpringWebSocketPush/websck"</font>);  
复制代码


: H, W2 ^  N1 i与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
/ X& O, \: [3 n4 }# N& M7 h8 R! f
5 p& N3 N, t& C" j
) Y8 f2 g, e0 b, n该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){
    " _' Y' t' A: Q# [

  2. 8 B, d% I* P2 ]0 N9 y
  3.         //打开
    " h" ~% |. `7 D7 V$ _
  4. 5 ~) w8 W5 F4 r& y
  5.     }- D9 `) |6 |8 v* u
  6. 3 i- E2 A8 O$ O& q) [) y# H
  7.   _! v$ a2 a5 j
  8.     socket.onmessage = function(){  f; }8 w& N8 W  ]" ]
  9. $ \4 D2 D" n( Z! s' C8 Z0 |1 x/ _
  10.         //在event.data消息数据
    2 t# t0 g3 l& n5 ~( u' J
  11. - P% W: _2 u7 K+ r9 @" |$ J
  12.     }2 \2 k/ w6 i3 l* u' r3 n( r
  13. / W; h8 Z$ t, ^3 i
  14.     socket.onclose = function(){
    2 a: }! J- w) w6 E; s

  15.   Y4 R4 b$ Q* t# ^' ^) g
  16.         //关闭WebSocket
    6 a& _2 C1 a/ Z2 c
  17. . o$ }, h- o: B( G, `( E* H
  18.     }
    8 D. U5 z% m  M  ]$ Z4 [

  19. 0 p; y2 @& r) y& D/ a2 L: ~
  20.     socket.onerror = function(){9 Q. G$ v/ O+ g$ E' q2 p) d
  21. 9 h, x, o6 r/ o( o
  22.         //错误触发) d2 n# m/ j5 K. R; K1 [/ C/ e
  23. ; ^  O% O: U) Q" @( f
  24.     }
复制代码

, E7 C$ _* J; Z+ v( d

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
" J0 M1 z8 W5 T
  {8 ?6 c4 G# k$ `

代码附上：

  1. <!DOCTYPE html>
    7 e6 l( I  U6 p# Q
  2. <html>: Y+ m) C( g0 S- Z& c3 i6 N0 v
  3. : ~: U, z, f2 n' R
  4.     <head>0 E$ J5 S% ~+ y3 z6 G
  5.         <meta charset="UTF-8">/ `* v1 z' b1 h: k( V
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">  v. l- E* R3 P
  7.         <title>WebSocket</title>: U0 t$ Y- C/ Q  z; A; P
  8.     </head>* H% r+ ^" t+ i9 M
  9. & z4 B4 L. H' B: l% {  R
  10.     <body>
    $ c" h/ r7 F0 c! `/ R( R
  11.     </body>
    / i4 A8 t- |- h) M1 z- h" I
  12.     <script>4 {: d3 y4 C7 O3 L) \7 q
  13.         var socket;
    6 ?2 ]' C1 w9 H  h7 T( A" Z
  14.         if (window.WebSocket) {! ^8 i( }: E) M
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    $ V9 b6 K& X6 n. G  ~9 c  q
  16.             socket.onmessage = function(event) {
    ) G) j* q4 h% ^+ D8 H+ _6 `5 _& K& B
  17.                 alert("Received data from websocket: " + event.data);9 t- A+ y, V) [0 o2 ?9 L: @: z% n
  18.             }. `6 n2 M2 i3 Y5 M" T( N" R; O6 r
  19.             socket.onopen = function(event) {
    5 j* b7 e5 K- c$ P
  20.                 alert("Web Socket opened!");. s' P8 Y, u  o4 Z2 x7 q
  21.             };5 h% V7 y* U& t7 Q
  22.             socket.onclose = function(event) {
    , F1 Z& v6 j) c. O- N! ~
  23.                 alert("Web Socket closed.");( p! c5 t" S) G7 |
  24.             };
    % D2 H: `4 D1 i6 E. J. r# U
  25.         } else {( A, I; W/ F6 K
  26.             alert("Your browser does not support Websockets. (Use Chrome)");
    ( v# }: e! Q: R5 i; H, b
  27.         }4 M/ ?9 ^: R' u3 o

  28. 2 t9 f; Q" t$ C7 Y( k, ~
  29.         function send(message) {
    " x3 c/ T) F  K. |$ S8 E0 j
  30.             if (!window.WebSocket) {8 v1 f  z, L2 E: z
  31.                 return;
    8 E( \: q+ n. q) t# K4 a$ u
  32.             }' M( M$ b- X! ]! b9 _/ C
  33.             if (socket.readyState == WebSocket.OPEN) {
    ( M* c. J) }/ G8 S
  34.                 socket.send(message);
    0 b- @/ i+ l2 e* K1 d3 R4 a
  35.             } else {: Y2 ?) U, s4 `
  36.                 alert("The socket is not open.");. q6 F6 R; j+ u; b
  37.             }; Z+ U/ |. ?- Y- ~' G
  38.         }
    - K; t# c) f2 y. h  M
  39.     </script>
    5 o9 x  C7 N" O9 N0 h9 j' z% M  N

  40. . }& m3 C6 a' c3 b9 K8 f4 Q+ v
  41. </html>
复制代码
  R  o; Q& C; Q  o9 I4 B

, e) L3 q9 P) N" a



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