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");  
复制代码
5 }: s% v- Y+ C0 v& i# g+ i

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 , [  z0 ^9 E+ n1 ]$ B
+ s2 ~/ o7 k9 {5 k
' y" Z/ B( b7 g+ }6 k
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开$ Q: \& f3 Z* y5 G. _! E
  2.     }
    6 o3 Q6 U; g, |" k

  3. & Q& U4 i$ U& r& v& P  R- F
  4.     socket.onmessage = function(){
    6 X. X' h- i# G+ A, q" u5 b0 K! B; _
  5.         //在event.data消息数据7 H& |: j: J. C3 b% b8 v1 }
  6.     }
    % Z5 m" w6 O6 ^  q2 I+ o
  7. 3 _3 X( U0 u6 e* A6 x- P
  8.     socket.onclose = function(){
    1 p2 A3 r' Q$ e4 ^2 I: i9 z
  9.         //关闭WebSocket
    , a$ K4 o8 F) @5 ~6 p$ H% Y6 R
  10.     }
    " `( G! S' e+ L/ k; g2 S7 z
  11. 5 m) b2 Y& Q/ P7 K
  12.     socket.onerror = function(){6 p# d& m3 }/ A1 w
  13.         //错误触发3 r2 l( ]4 K0 ^$ ~  U7 |3 z
  14.     }
复制代码

. A1 e% m8 r7 ~5 m; A
& a8 A9 H* \+ D3 \

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

  1.     socket.send(message)
复制代码
/ \' ]5 w: W6 ^* _9 z4 l- C% }
  @  C( K. h: c/ g/ s& L2 n5 F

" Q# f3 [. T4 }4 b3 M5 J

代码附上：

  1. <!DOCTYPE html><html>8 e0 f: g1 G; e: H
  2.     <head>
    9 I5 m! a+ I& K2 e
  3.         <meta charset="UTF-8">
    5 Q0 A6 O3 g; ?; `) m1 f( O" p
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% M" ]; Q/ N9 J) `& F2 B# u
  5.         <title>WebSocket</title>
    , d) W* @% O, ?7 c8 P
  6.     </head>: ~& E" j* P. R; A
  7.     <body>0 E2 L4 k: l) Z8 v; p1 O+ J
  8.     </body>7 ?6 G7 `9 `, f0 P5 ]
  9.     <script>
    * u1 L2 I1 P) c) H
  10.         var socket;
    7 G9 T, q1 C. N! ]/ V3 ~
  11.         if (window.WebSocket) {, [5 I7 J" F0 g* g( C0 G
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
    9 L. K+ ~3 k0 r
  13.             socket.onmessage = function(event) {8 ~1 L0 l' Z  N6 i- |9 y) N
  14.                 alert("Received data from websocket: " + event.data);
    - k% s1 p! I3 `$ w% h( V* R
  15.             }) A8 ~: C7 V9 g3 i
  16.             socket.onopen = function(event) {/ m3 T9 U  f2 h3 w/ F( V& b$ ]
  17.                 alert("Web Socket opened!");4 R; L1 C# R0 s3 l, F2 {
  18.             };5 p  X' k9 q* v9 u) A! o1 y! w
  19.             socket.onclose = function(event) {3 P) Q! \# N$ k" E3 ?& a
  20.                 alert("Web Socket closed.");
    ( T& e1 z$ D3 `, @1 q" o
  21.             };
    % b* n6 b6 w9 o% L( V9 z+ T
  22.         } else {" G9 s0 k; a0 b' b
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    * n' }- f( M2 x* X% _# {
  24.         }
    ! C! ^- A  \, W! p; Q: r

  25. ( r  K7 u+ S% |2 \
  26.         function send(message) {6 q  k& @! V8 t' n3 P
  27.             if (!window.WebSocket) {8 H; S# n9 O+ j
  28.                 return;" v, @# D6 j3 |& Y9 ?6 ?: \
  29.             }
    5 r* k; h# V/ m% g; N; V- ~  M
  30.             if (socket.readyState == WebSocket.OPEN) {
    " B& V% x( n# M  v4 C
  31.                 socket.send(message);
    1 w" n9 C# C/ n( ]
  32.             } else {, \) J" L6 c* O- w; O
  33.                 alert("The socket is not open.");1 X* d2 `0 ^) @* p/ l8 B1 P2 C$ |/ M
  34.             }
    3 O) _* N) ]+ E7 |
  35.         }' d( k  k* b& k% o
  36.     </script>
    8 S9 j. p) U" h/ j
  37. </html>
复制代码
- y9 \# A* i; h# r8 e2 H

# r' A8 {1 _: W. z5 O1 |8 ^  z/ W# H5 A5 k7 M" O! l8 [9 X8 K




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