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

* C% [- p- N$ X, w7 N6 a, M
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
' f% I# \2 J4 ?1 r! G' r$ Z
. ?  ~' Y" }$ v  U# L' K  |5 n8 S/ p5 O0 i
该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){" O1 C6 ~% S: t9 X

  2. 5 s  X  ^1 y4 `5 u2 T4 S( @+ m
  3.         //打开2 u+ B8 y  G- H) j8 N

  4. 4 x9 Z. q) g! |2 f5 @3 F: s
  5.     }& F2 W+ `8 l$ u& Q% h$ f- e) L

  6. / W( b$ B' I: Z1 w

  7. # w1 i9 g% K) s( [
  8.     socket.onmessage = function(){/ w6 a. x8 ?% a. ?8 p3 N

  9. ) p  Z5 y$ r8 O( C9 b5 S: s- j$ A
  10.         //在event.data消息数据
    * V9 H+ t. c0 O4 [9 ^
  11. 4 b1 ]: j9 w/ Y+ G; F
  12.     }
    3 F% \; n% _% @% y. b8 o% c
  13. 7 t0 W5 |, G1 ^# `) R
  14.     socket.onclose = function(){) ~. ^  M7 K; F- }# j
  15. , c# [* b: i' ]8 C( Z2 D' ?- h
  16.         //关闭WebSocket, {! x: ]% w9 ?1 {2 {, Q) E

  17. . m- E# q# o3 r( {) L! r' C0 v
  18.     }
    2 i2 R4 H3 ~% w: j9 g+ q$ l9 J
  19. 0 Q% F. v9 m" B4 K( H3 o6 V4 {
  20.     socket.onerror = function(){1 g2 y/ o" I5 i  y* {
  21. ' Y# ~  U$ ^7 f! r7 b, N& L
  22.         //错误触发
    * {; H. Z+ L. p# u# v+ z) q
  23. 0 U% H. S; J/ J: e. Q! n6 b
  24.     }
复制代码

, m( T, @3 w" h0 F5 Z) k. U# B

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
$ `  w2 ~( T3 ^, t2 Q
% R" n  z! \- j! l( I. \: N5 I7 |

代码附上：

  1. <!DOCTYPE html>! b4 J$ Z& U: J) O/ _3 U, s2 A
  2. <html>, L1 d& W% R. E) d

  3. 7 i: T" [- g3 m* N
  4.     <head>
    " Q) ]1 _- r& R+ j" H) S
  5.         <meta charset="UTF-8">
    ! d8 ]& I7 s! ]; F
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">1 M4 D3 ~7 r. ]0 L) {
  7.         <title>WebSocket</title>
    7 G( I3 I+ w3 _2 R2 {8 S
  8.     </head>
    . X8 A7 h) a0 K; }

  9. 9 o% L% }2 T6 T. D
  10.     <body>
    + W, H2 r+ R. V7 F
  11.     </body>
    0 y* B- ]7 _0 X, D
  12.     <script>
    7 F+ f* Q) [# L0 F
  13.         var socket;2 A5 i) N* ?6 k" X( w# x
  14.         if (window.WebSocket) {  y/ b. }  r) k. I
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    9 c' ?: `$ O+ U7 B2 w
  16.             socket.onmessage = function(event) {0 r6 _( Y; \# k" L) t" U  n
  17.                 alert("Received data from websocket: " + event.data);: f8 U( c% Y7 _: ?* k1 V( @
  18.             }4 C$ J1 `% f" Q2 X3 M+ I# t& P0 n% d4 }
  19.             socket.onopen = function(event) {8 K( \- A$ |' C$ k
  20.                 alert("Web Socket opened!");
    " V3 F, u8 E* g4 J- A
  21.             };
    ; U. _: q8 S" s4 y9 e$ ?# j+ Y
  22.             socket.onclose = function(event) {- w; x% i1 f5 e. e- Q& ]
  23.                 alert("Web Socket closed.");
    ( J/ K4 ~( I# r; m* ?0 R
  24.             };
    1 S" O9 c* E) S8 |) a2 A
  25.         } else {! }7 f( Z0 n5 r1 |2 c
  26.             alert("Your browser does not support Websockets. (Use Chrome)");
    ; r7 Z- o) O5 Y
  27.         }1 f3 {( L9 j1 n

  28. - u$ W9 N, {8 ]9 o- O3 g9 c9 o" V
  29.         function send(message) {* U. j7 K) e1 C! b! }: L$ b
  30.             if (!window.WebSocket) {) w; E) n0 @) D
  31.                 return;5 J* ?6 a! }2 |2 a
  32.             }
    ' h- t6 S% I7 r
  33.             if (socket.readyState == WebSocket.OPEN) {
    9 g$ @! I. d! A' f
  34.                 socket.send(message);
    % h1 Q- }* M' ^# [
  35.             } else {
    ) p+ X! Y7 ^4 e, I+ S
  36.                 alert("The socket is not open.");( z( d, L* I, p+ a' W8 q
  37.             }+ ^+ _% x: p& e! ]! H+ v
  38.         }
    8 s# x6 Q& E; z! j$ @
  39.     </script>
    5 e) i& C6 }+ t9 S

  40. & u) H% ]3 g# C3 q4 N7 a9 H
  41. </html>
复制代码
8 a6 U$ x- I' h- [7 z

% A% W5 }/ u4 c" h  W9 E% y; I



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