|
如果你要有一个支持 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>);
复制代码2 p' X+ F3 ]1 c
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
( p. D/ D* c% Z6 D- [. e
: j- ?5 ?( S$ f# s+ [: x
, r! V: R9 }: W9 C- w/ p9 h; D该套接口对象有四个用来监听套接口事件的回调: - socket.onopen = function(){
; [+ }: M* j& _ z
9 [& c" R$ ~1 y* k- //打开$ ~, N$ @: y" H# V: Y- d
$ V4 a7 h6 h3 _0 |- }
& p4 K+ u0 e# A( f+ d: S
7 u; Y" h) r4 |1 D- |8 B C- {! ~- 2 }. I8 ^! P0 h! @5 x
- socket.onmessage = function(){
+ d0 D' ^3 `: a+ s* U% g9 |
Y% Y% b' Z+ r# q% ?- //在event.data消息数据6 }) L6 e. |9 ?; T: H
. e+ d6 v& l& m6 _& s- }' w* e! E7 n5 @8 o! q
- 6 }6 I9 F( I0 q! C6 k- c
- socket.onclose = function(){
: Y. N/ @' s# ?* q6 y6 \$ r8 `$ U - % S6 B+ {: p; H
- //关闭WebSocket
4 c7 q1 v; g- J$ A% a0 w, v: X/ ^ - : j; t2 L% T) ]8 C" p% e
- }0 \/ i" n1 N% l
- 6 r# R" C6 i Q0 l
- socket.onerror = function(){
. z0 c# U2 N1 c( t& ` - ?! e' {, t5 j% h! n
- //错误触发 X' C% F/ F+ ^* W6 ^% F! P
- " H6 }; x% }% z9 ?2 @6 a y# Z" ^, x
- }
复制代码 , n1 m y9 ~! r$ z; d
通过套接口发送数据,调用socket.send: - <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码 4 H4 Y8 G- }* E* j$ q% h6 O/ t
1 o& C: O3 k( f
代码附上: - <!DOCTYPE html>
2 b- x, j; G" q) {3 B - <html>$ t; H- H# [* d9 ?0 z) @
5 U, b7 ~, n* S! ~+ M3 z$ G- <head>6 v" q1 V$ {$ P3 \3 z. f( \
- <meta charset="UTF-8">
( Q5 p0 G7 Y$ h1 B2 z" F! m - <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- a1 O: `3 x( k - <title>WebSocket</title>, M" h/ U9 A3 f4 h( F1 S% y4 t3 O+ k
- </head>
' Z' o) m5 U. w; x" a - ! y& O4 T3 p7 Z% @- Q1 d; X( r
- <body>
- T" s; M! A3 ?6 i) Z: ` - </body>2 ~' K0 L( n& d4 w3 f/ m- | b
- <script>
. Y5 R! v3 t9 f) i5 ?" |# x - var socket;
( U- M! ?1 ]9 ] - if (window.WebSocket) {+ u% u. ~! C& i1 R
- socket = new WebSocket("ws://localhost:8080/myapp");5 K2 G$ X9 d# ]: f% S: g, s
- socket.onmessage = function(event) {
3 F9 E5 M! w- K6 g9 O# h, W% X - alert("Received data from websocket: " + event.data);
! S/ |6 n1 K9 t - }
5 q0 g, p/ n, ^) F, w - socket.onopen = function(event) {( B9 g/ u3 b; ? V: t
- alert("Web Socket opened!");. j/ l! U f5 e. ?& U0 _$ Q
- };0 o/ e; m, _/ G, H
- socket.onclose = function(event) {5 h8 c/ s/ {9 `; J. }, I9 z
- alert("Web Socket closed.");7 i h4 b& {* d$ S
- };/ c, Z( i4 g% J9 H9 I- D
- } else {2 ~6 J& q' \& x G( u* f9 B
- alert("Your browser does not support Websockets. (Use Chrome)");% S* J! d6 I8 n
- }9 E. h# ~ Q% {5 i
& z/ f+ X. @" _9 \8 \- function send(message) {
/ e+ V7 T* e& ~" s, X( y - if (!window.WebSocket) {
/ F& t2 J! F2 ` - return;
% ~/ y( V3 g+ ?$ g) Z3 T - }1 h# i& X$ Z0 _# J! ^
- if (socket.readyState == WebSocket.OPEN) {
5 C+ g# z* f* S0 n8 t - socket.send(message);
9 ^* B0 N7 C' N& X8 G# I' ` - } else {7 ~) }$ r: }3 S# L" k% N' N
- alert("The socket is not open.");
; M/ n) e6 x/ f) ~7 R8 n7 T - }
1 C8 a+ I5 [1 G% y- d" i - }
5 H6 @* G+ A. b - </script>
; |' j' I. X, J2 A, W - " D- q$ R, \' F/ Q" ]
- </html>
复制代码 6 A0 a' L8 |) M; P r) b: N
6 f# n9 B0 r% @) O |