|
如果你要有一个支持 WebSocket的服务器(Java、Php等),可以在浏览器中使用一个新的WebSocket服务协议,来打开一个链接: - <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>);
复制代码/ H) i( }4 w& _; m
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
. _8 V. Q& \( L# ]
: B9 z& m: e% {# S* b4 l% T& {, \) m- f7 h" v
该套接口对象有四个用来监听套接口事件的回调: - socket.onopen = function(){
3 A; q1 t0 [' B) E* d: i1 Q - * s7 t' l8 |7 O- o+ C2 {, q7 ~. q
- //打开; R9 ]! L+ Z9 C6 t. a
- " I: Q; A6 N) v' B+ D) w" g
- }& I) ]5 b" w: }4 h
3 S$ \# c$ Z4 N2 |
9 T# F: N2 r) W: s0 w( e- socket.onmessage = function(){
" U# Z9 N! b! e( c
: s6 a4 E P! q) v; M- //在event.data消息数据+ i3 {6 F2 {' f+ \$ g/ \3 D- S
- - C$ \; `- G- X7 b2 x( F9 {
- }$ _% E4 I7 Z0 ]8 a$ R& _4 B
- & W+ _) j3 `$ F) L9 l9 W
- socket.onclose = function(){0 R+ u9 o/ D C5 C: |) ~
- : a9 Q( \( j0 \* B( F/ ~! C6 D) M5 k
- //关闭WebSocket/ k' B* c1 E: s7 Q7 B
9 J2 J! P* F5 X7 Q- }* p! S$ J: m6 b8 S5 G) H$ m
- 6 E0 p* C! }/ ]" d1 I
- socket.onerror = function(){
7 k# c/ C2 V( n5 d - 0 |# ?1 ^( G4 L: H+ _! b
- //错误触发6 y+ d8 c1 i- U& |# \
& |. v" T: I6 _' v( S6 x: I- }
复制代码 9 o+ l% Q5 ]: e& T
通过套接口发送数据,调用socket.send: - <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
" P( }, h" b' ~( M2 I3 |1 ~6 f# b0 ]; _* M% j3 r
代码附上: - <!DOCTYPE html>6 s6 a5 p. ], J. G7 e+ c6 |3 n+ \
- <html>, S" ^9 k1 I( q( w4 d" w9 G4 V$ V3 i
- 9 C3 N- ^: y! E6 C! l3 G, `, M
- <head>; n8 P0 b+ J' X O
- <meta charset="UTF-8">
$ B; u6 [% `+ K" K; X! g. F - <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">" n# X& x( x |, B5 j4 }
- <title>WebSocket</title>
6 d, d8 `% y! @! Q0 s - </head>
( Y3 c% ?$ e0 k6 d0 T5 v7 P6 T - ' S7 w& {, P/ P9 f" S
- <body>
! N- j# u2 R' H% z - </body>
$ m) H) a; a% s - <script>
* y3 S- Z: r, C" i' B; L" V - var socket;4 L! g( Z# Z5 X" I/ h& x
- if (window.WebSocket) {
4 P# M4 T/ X, Y, m; N2 z6 Z - socket = new WebSocket("ws://localhost:8080/myapp");
- y5 ^) V2 K4 C - socket.onmessage = function(event) {. V2 V. P9 t& I1 n' S9 S, e5 k0 n
- alert("Received data from websocket: " + event.data);. f5 b5 B" g, L9 S: a
- } H$ v* p J4 H
- socket.onopen = function(event) {2 y" D7 K! }3 c9 g1 v
- alert("Web Socket opened!");
/ ^/ j. @4 v1 ?; v. g/ e% _ - };: |3 h* |6 F1 }& m1 ^6 F& a
- socket.onclose = function(event) {
( B/ g2 M( w% d" r e/ O$ `" n - alert("Web Socket closed.");
/ Q; v9 J" u5 b2 X8 W2 `4 P - };5 V9 k8 v) |( i0 \
- } else {* N+ R1 t1 P {4 E
- alert("Your browser does not support Websockets. (Use Chrome)");
3 n8 r) u4 X% o6 V+ q1 j4 I* Q - }
6 V! z0 _: @8 Y - # C2 w5 u3 s7 v2 l) }( p
- function send(message) {8 `$ ]! L; K& ~' r- c/ X! U
- if (!window.WebSocket) {
. k5 p1 ^. |, V% @& x: p9 j - return; a2 q0 o1 W, ?8 G. f
- }/ p2 G- z# [! W+ H% j
- if (socket.readyState == WebSocket.OPEN) {
/ F, T5 l, R' { H7 t; F3 {# @: ^ S - socket.send(message);
- Z& l/ v7 A1 F6 c9 k6 @! }4 O - } else {5 `- u+ ]$ | K: N2 H
- alert("The socket is not open.");! Y6 ~ f5 S" {- \' h* M; G3 ~
- }4 `: w# B5 ^& C. j7 X; p
- }6 t+ u2 k$ q7 E: ?0 u' Z5 G
- </script>
/ Y8 S: v# o0 I- v - ' q' e2 B3 E. o, H! E" ~6 x
- </html>
复制代码 9 I7 W9 L4 ~# |7 c0 D
$ J7 y3 T* c/ N2 _( h- ]$ C |