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");  
复制代码
& |- ^6 q; I2 x2 y

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
* ~1 G' s3 Y& F/ Y0 X% C! Y5 W; B* C" k) N) A# F% H5 B
1 {2 K. A( v; a; d2 I# U5 O" b7 u; G
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
    ) H" i' k8 X/ `5 [. _1 Q# \+ x
  2.     }2 _4 B! @% c6 ?7 ]+ Z+ H

  3. 2 m- Q- t" Z. R( e1 `
  4.     socket.onmessage = function(){, b# C: V8 s4 @. Z. ^
  5.         //在event.data消息数据
    1 Q4 a6 i) R2 n( c4 C
  6.     }  c# u: Y: G- }; E3 Y; L2 X( V
  7. % k- \# p" a+ v" p" m/ y. {* `" O6 o
  8.     socket.onclose = function(){2 I! c1 L4 ^& E! g8 B1 q
  9.         //关闭WebSocket  m& I6 ]( [+ ^1 C! x
  10.     }
    + S( t) w# x% U) {9 `

  11. & u: R/ \! x2 z. s; D
  12.     socket.onerror = function(){
    7 f  W+ `. @7 Q  @0 }, i, D$ S
  13.         //错误触发
    ! u! \4 S  ]: l5 _
  14.     }
复制代码

0 J6 I- E9 A. I$ v9 k
, T8 S0 S1 v$ T/ u, n0 L

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

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

$ C- ~0 r' I9 R" o6 S4 W$ Z5 b6 U/ h3 p7 F6 m0 ^

% \2 i8 C# x8 U( \! L4 v

代码附上：

  1. <!DOCTYPE html><html>
    4 b+ y3 S# ?) M7 h8 ^  P
  2.     <head>
    - x7 r  T8 @( P0 p
  3.         <meta charset="UTF-8">
    ( y8 [* ~  l) g* Q
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    & i4 P& I) w& d
  5.         <title>WebSocket</title>
    ! L0 }. B) W: O# ~* n2 I% a
  6.     </head>, q' E! t& s7 ]$ N' G) @) H; c
  7.     <body>% v1 G' P, |. U) W" e5 J: F, `
  8.     </body>& ^% {# X/ o! @
  9.     <script>' h. Q: c1 r) N% W
  10.         var socket;
    # c( h, k( l* S7 ?3 B3 |. v0 q
  11.         if (window.WebSocket) {7 j9 K* J- @1 A8 _8 O, B3 l* `
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
    4 u" c8 t& P" v. a% d$ L* f* D
  13.             socket.onmessage = function(event) {
    9 C) K+ j$ P& v7 L8 t: E5 `# r7 }8 ~& o
  14.                 alert("Received data from websocket: " + event.data);) p4 f' G/ a8 f$ U  n
  15.             }/ y) T  s% i7 j/ i
  16.             socket.onopen = function(event) {) ]8 W6 `4 }" X* g% H  @# ]% K. k
  17.                 alert("Web Socket opened!");; O; B6 {( o7 ~& ~9 X( E7 r
  18.             };( r# r& Q: O" `: i7 p) v4 Y7 x% Q$ v' `
  19.             socket.onclose = function(event) {
    6 Y% ~$ c9 U, O2 L" c
  20.                 alert("Web Socket closed.");
    + t7 p2 ^+ c4 z
  21.             };5 M! y$ r$ n/ m
  22.         } else {
    3 A# D" H" j: T  b9 J
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    ( e* p9 v9 @0 ~
  24.         }5 S& b0 C: f9 n( o' E  ^& S8 X

  25. $ E0 ~  {- O2 B, U
  26.         function send(message) {( r1 \; t% \$ W) r; E6 O# Z" F1 ?: c: X
  27.             if (!window.WebSocket) {+ g" R5 D% m+ G1 h  l8 w3 x" d0 A0 j0 s
  28.                 return;
    - s1 _0 {' |) W, B
  29.             }0 m, `. x+ ~# z1 w
  30.             if (socket.readyState == WebSocket.OPEN) {
    ! q6 r* {- `) P9 P
  31.                 socket.send(message);
    " Q! j5 P( c9 l) P1 X6 [; x
  32.             } else {
    ' y# |" N& W5 U0 O% I& u
  33.                 alert("The socket is not open.");
    + G$ ]+ r# @" B* `0 S0 {
  34.             }
    3 x9 I9 R6 x/ O( t; L! W/ e
  35.         }, V# |& P0 ?: z. C6 P9 ]# [) X9 R
  36.     </script>
    : m1 R4 x6 ]8 t! y
  37. </html>
复制代码

0 H8 f6 W, r# |! V0 {, h. A/ i% W/ V% t$ D5 r4 T  Y

& ^2 o6 t2 H/ O# f5 d+ {8 ^



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