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");  
复制代码
. y; e0 S  _7 X

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
) [6 L; X4 C% X" p+ A$ S/ L$ |( L. O+ J% \
; D9 d" _4 ?% b: l/ D0 e
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
    3 l( ~0 j3 B+ Z. e* F2 U0 Y
  2.     }+ M* T9 `0 @/ q" l/ U9 q
  3. 9 l+ f& b) ~/ @5 o9 q0 G# `; V6 V
  4.     socket.onmessage = function(){, B# O* O5 O# p: q0 Z
  5.         //在event.data消息数据
    % c% \" d, `& F$ {$ D  h- V; o
  6.     }! l8 }( A2 r6 {: l/ ]9 _

  7. ) C9 V) J) F% M6 u8 Y
  8.     socket.onclose = function(){
    0 I6 O* M, d* U' e  p) L
  9.         //关闭WebSocket
    , P8 w$ [- y5 E8 O; T5 p0 y
  10.     }3 G# @8 Y4 F0 B4 m/ |7 u+ s: z
  11. + S9 a7 S2 R; s  s
  12.     socket.onerror = function(){- l7 ]1 v: b5 k' X8 O
  13.         //错误触发
    ( b7 [2 o/ p' I! I+ s0 M# ~! K
  14.     }
复制代码

/ V& R3 h# J* b
- f8 m; a7 k- M+ x

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

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

7 Z5 r( i- t7 g" T" W3 }: l& f1 \# @; f- c
7 C8 R, p' d7 Y$ S, F# d

代码附上：

  1. <!DOCTYPE html><html>0 s9 b* S. ]2 V$ j. F
  2.     <head>: `5 H  q; }' ^! X& F
  3.         <meta charset="UTF-8">
    . F2 d. a2 H  D, y+ Y
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ _' _4 u4 [3 |1 ^! Q
  5.         <title>WebSocket</title>3 @4 q7 l' u# M: s
  6.     </head>) w, u: [3 G# z  ~1 m9 T" u; \
  7.     <body>7 Y- @2 E( F# i3 Q8 B+ m8 z( x% Q- f
  8.     </body>" l& h, A( P' F  C  f
  9.     <script>
    ' i) x- b0 q; O. q: ?9 n, I; G
  10.         var socket;
    ) z) u4 ?4 D" J( ?* T
  11.         if (window.WebSocket) {3 }; n( [+ o: |6 a% e6 H) V
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
    1 x+ o# Q# x0 ~0 \0 p( ]1 C
  13.             socket.onmessage = function(event) {" M, h& ?' z) R, P0 g' W
  14.                 alert("Received data from websocket: " + event.data);
    5 }& T2 a5 t) h* p. l0 K
  15.             }! s5 F$ x9 z# b. N& c* S
  16.             socket.onopen = function(event) {, F# z5 d% K3 U5 j$ N3 E
  17.                 alert("Web Socket opened!");
    ; C" V5 }3 k+ x
  18.             };4 {8 r8 `( Y! Z8 O
  19.             socket.onclose = function(event) {
    , j% t2 d" w! C: X" t
  20.                 alert("Web Socket closed.");- w: A% Y! H* r8 X3 r+ D6 U5 e7 S
  21.             };
    ) t2 d0 q9 L7 y
  22.         } else {
    * ]0 _, w/ Q+ r. v9 u0 w9 e
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    ! \- ]8 J9 C5 @4 i
  24.         }
    ! v8 X: a8 r) a

  25. % g' Y* Q3 B- w1 x
  26.         function send(message) {
    0 I2 e% [8 X1 L* U6 t) A
  27.             if (!window.WebSocket) {
    . J6 w4 C& y; F
  28.                 return;6 E, e1 Y% M2 F; ~
  29.             }6 \; ]8 L; h* O/ J7 @$ i
  30.             if (socket.readyState == WebSocket.OPEN) {
    ( ?! |) @+ C5 N' W  ~
  31.                 socket.send(message);6 e9 O6 }; ^5 r8 I* F( W
  32.             } else {  ]2 Z4 n. X. X( B& k! ~! V  S1 m, l! F# ^( \
  33.                 alert("The socket is not open.");
    0 ^' ?! H# X+ O) i6 ~
  34.             }" U+ R( W+ O) H1 D
  35.         }1 b, {' o5 q6 a! F% c
  36.     </script>) T+ \2 a( G5 ~( \
  37. </html>
复制代码

( B5 ?- @1 d* R; ^
' [4 b- h5 T1 W* G* n8 p  Y
6 {$ x; @5 h9 B4 [* J+ J



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