浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
6 I, [& H6 @ Z& H0 w
) E9 B8 ?8 S' I2 h; C/ ?1 c2 @3 M+ {( R8 \
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
. a h% S f& K7 i& h
}2 R+ B& Z3 F( p) x
; e, _0 |7 m: b. Y. D
socket.onmessage = function(){% k* w1 w3 |+ M* Z, P
//在event.data消息数据
L" [$ w2 K; a: v% |# X& E# T, d7 c
} Z0 j% F* K$ E) ^) M
6 {+ M. ~( i% A% \% m5 r
socket.onclose = function(){4 `" F' W" e+ O, H$ ^8 V5 w: b+ h
//关闭WebSocket
- ]! N: K) P6 c6 u6 u* N/ Y
}
, J \& c1 p9 R( d4 q+ N/ t; l+ }: L
" K0 {* c6 t1 q. P8 c$ i3 f
socket.onerror = function(){
; h; U- A- e Z
//错误触发
& X* x6 N" j, M: [& `
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>: E0 q: [; K$ I3 S, A% s
<head>2 \) s' V, J0 G3 m3 x( F2 m
<meta charset="UTF-8">; ^, \) X1 G+ t4 I
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">- s' f! P( p. h
<title>WebSocket</title>
7 U& w" m+ P+ G! N" N0 `& Q
</head>8 p4 ^, y' g7 F; N, u5 [( {( h
<body>
' u2 R5 o: u) E9 T
</body>
3 E$ U f2 V p K4 g7 [. b% G- x
<script>
: p: O7 e, U; n2 ~% l& K9 Q
var socket;& L% O8 s" m1 G2 N+ Y
if (window.WebSocket) {6 H7 {- Q6 Y9 w4 t$ g
socket = new WebSocket("ws://localhost:8080/myapp");
: h6 N) O) i! ^. _
socket.onmessage = function(event) {
! Z t: I( [- G, e
alert("Received data from websocket: " + event.data);
% c" _0 a& |! J# a7 a
}
5 Y* N& r5 ?/ {' o
socket.onopen = function(event) {
/ L! g0 _# V y
alert("Web Socket opened!");
' ^: V. r+ h$ e
};
8 I" m) L- }: L7 l2 o
socket.onclose = function(event) {- q% R( I( k: c, X. n! ]; x- m
alert("Web Socket closed.");
5 \# S. h3 n! x# K: W8 s
};0 n2 s h0 V. t- T k
} else {! ?" y8 e1 J/ f* Z
alert("Your browser does not support Websockets. (Use Chrome)");* T1 q2 ~4 }' M( q& F: U" D
}
& h* b# B& C1 b p+ o" \
% M) a' F, M! ^( P6 p
function send(message) {% g. _7 \: `$ y, ]
if (!window.WebSocket) {9 j. Q" C& {" n/ R2 q9 K9 n0 n
return;9 H+ j. r1 ~3 J" V7 s
}3 U7 ~# S0 a l6 ?( D
if (socket.readyState == WebSocket.OPEN) {
* ~" U4 K* L% L& A- u; l i
socket.send(message);8 X6 f& U7 b, J' \1 `4 \/ h9 `
} else {7 ^0 P7 P0 _3 ?9 Y' H. |. ?
alert("The socket is not open.");2 I8 [0 w, M q1 j, z+ u
}
! T) W* W/ h8 |/ C, C! ~# J
}# E; {( o9 b3 S( o0 n7 {! x% |4 K
</script>
$ ?9 E7 X7 G4 {% H0 l4 x# K/ n
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯

浏览过的版块