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

9 v3 `7 Z9 k3 U' S6 T: K. o( l

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
: N7 G( U/ l2 p" Y' G" r) j  s, U! i& C/ D7 `: w. u* l+ f7 ]
4 _+ V5 B" t+ t4 \. r
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
    4 k6 J0 P0 t7 z+ `/ ~) p2 c! G2 |. F
  2.     }
    6 J" V' X5 W) n1 w5 T9 Y- z

  3. ' M/ x! }$ o6 P0 e
  4.     socket.onmessage = function(){$ W  v; I. J# T  C9 L# `) T0 u' Y: y
  5.         //在event.data消息数据
    7 X5 {% A5 x; t# Q: N
  6.     }
    0 J# r8 q4 h) u) a$ `
  7. % k" p1 g" p8 b
  8.     socket.onclose = function(){$ V7 ~7 _( a0 ^- S
  9.         //关闭WebSocket
    ; c0 A$ s& O- _8 ?/ N- y1 F
  10.     }9 P' N+ v! D5 t+ M& z

  11. * B. R3 r" v& ~- O. z* l
  12.     socket.onerror = function(){+ }% ]+ k8 C6 u* `& n5 A# q0 Y
  13.         //错误触发
    3 b* W! ]1 Y& C) Z
  14.     }
复制代码
" o2 [2 _5 I8 y9 J% z4 i& Y
+ o/ D" s8 c9 X& A7 C/ h

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

  1.     socket.send(message)
复制代码
4 D4 ?" s) |( e3 m1 `0 V6 W0 Y

2 Z( o$ R) N# V. ~1 j/ C1 V/ L' G$ p3 C5 P/ L2 W& y/ r2 u5 Z# _7 P2 H6 E" A7 K

代码附上：

  1. <!DOCTYPE html><html>9 t! z( `: K; W  f0 a8 j
  2.     <head>
    " V9 `3 c/ z; H+ k) e9 S! q8 m
  3.         <meta charset="UTF-8">
    : Y' |. S, }/ B# T% ^
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    # V8 K4 r. Z& V9 A( u4 O
  5.         <title>WebSocket</title>
    ' U* {$ S6 t  a. I6 h2 C2 a
  6.     </head>
    , K% ]3 e0 i3 B; j2 y! L7 U4 ]- }
  7.     <body>% D5 h& U: y3 G7 V! [- Z
  8.     </body>  Q2 R/ Q8 T- }: S! T" x( Q% v$ R
  9.     <script>
    . B7 s; S. u9 a9 C/ T
  10.         var socket;8 Z$ U1 G* i" e# Z' U
  11.         if (window.WebSocket) {
    % u! p) ^7 u6 R6 J% [
  12.             socket = new WebSocket("ws://localhost:8080/myapp");( d4 [6 E, C7 ^9 K0 I5 [# `- ~
  13.             socket.onmessage = function(event) {
    ( t7 f5 s" t( K
  14.                 alert("Received data from websocket: " + event.data);
    # y1 E3 \! Z, X3 G/ y) ], s; C6 o
  15.             }& }" x2 b$ ^% k4 e% i1 s" B
  16.             socket.onopen = function(event) {
    4 |; h, _1 d# L8 _( B
  17.                 alert("Web Socket opened!");0 Q. F3 o( L9 Q6 ^
  18.             };6 B8 y+ m8 M+ D6 r
  19.             socket.onclose = function(event) {" p; t0 s5 j2 L- s6 [( g) ]
  20.                 alert("Web Socket closed.");5 n/ q  {8 r  Z) `8 r5 q
  21.             };/ T, i5 \3 J3 f' v2 X! f0 }: K
  22.         } else {( S! j0 i1 a2 F' e3 ^' M+ n- Z
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    0 w( F: `0 [' N5 f0 ?5 ]3 u8 H
  24.         }, m* |9 m  q# E/ L  S2 h
  25. $ E+ c& @2 q4 z: H, B% H" `4 ]
  26.         function send(message) {
    4 t6 }* J( I% Y: h9 s* b) f5 ^) f8 ~; i
  27.             if (!window.WebSocket) {* M, S  a' u- ?* `
  28.                 return;, c' n% f6 a9 K. d6 W9 b$ t2 @( F
  29.             }
    ! U) f+ p* T0 b
  30.             if (socket.readyState == WebSocket.OPEN) {* X9 {$ g' R2 }3 C# ]& ]7 a/ T) B
  31.                 socket.send(message);
    # `) I% N4 y3 {- K
  32.             } else {
    5 C. \" x; |* m: j
  33.                 alert("The socket is not open.");. Q5 `& {3 w- v, v. [1 F
  34.             }
    ! [( l7 ]( J& N3 F; K5 ~6 l
  35.         }, c! ~+ v: @$ \4 E7 Z% e1 h
  36.     </script>$ k1 X# {- b6 X+ Z9 c" p
  37. </html>
复制代码

- V1 X3 ~* x& x' ?, P4 k
3 Q' C1 ~/ D) `; r" ~  `: X( d6 \5 a7 V6 k




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