浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

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

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

复制代码

) w; }# m$ P$ T0 u% Q
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 : e! c/ y% n. \3 }' i9 y; P* t2 @

* n( j O- C$ `+ \& @' t" @9 C3 {6 v4 P5 X" N3 k
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
* y% l3 h$ \3 ` ~9 s
* f2 }3 r/ ^6 u; V, p
//打开
3 B# B1 T" Z$ u% f, M& B {
5 _" l( i# x" M4 r2 h6 O
}$ V% w0 s7 e7 d6 d/ \, w
9 m9 R2 L" `0 i7 D3 p- T
$ S* j+ H% e0 P0 q0 b
socket.onmessage = function(){" ?8 H7 {) F+ N+ D% G6 G+ o3 u0 q
) q( M7 R( n+ I
//在event.data消息数据
% h% l' }/ n/ C) N6 _
7 v8 [9 _2 Q8 r# A; a* S. A
}: [$ t9 w9 G3 U* Z" V! r& j8 P7 U
F& X( g2 Q# A
socket.onclose = function(){
6 B5 N4 |7 n& j1 x
+ |! S: q/ ? ~( B& z& V4 {
//关闭WebSocket( V$ {; w9 ^/ Z) E( ~
) H8 z1 J1 e+ }5 a# G. h
}
( P- M+ `' K( B$ K4 R
% r5 Z$ q. b: B! a9 U; v7 u
socket.onerror = function(){( h9 p9 b5 \% x7 ?$ G* X) b
% l& n- F. |% }, m5 w+ Q
//错误触发" V+ l, A7 I# D! B; _
% A/ d* G( H! k" N* L+ I5 o
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
. b+ |$ V- d; i+ A6 U" i
<html>
/ w8 {- C3 d1 e. `
. l$ @& d9 S9 D1 o& @' m
<head> F9 D% M4 z. F8 f, T
<meta charset="UTF-8"> Z% ~ G+ G( r) L
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ ?: s6 C' ?6 x* C' ?# l L
<title>WebSocket</title>9 k& H$ B5 x7 Y' |3 f2 [2 R
</head>0 Z# m7 e% t7 N% g1 p8 {
! J+ v, i$ H( X
<body># U1 Z3 a8 E. t- l' C. R3 H" D
</body>+ J$ a8 t+ ~0 {( ?: x
<script>
1 x/ O3 U; z+ Z5 l
var socket;% ~# r$ W# w0 E0 }
if (window.WebSocket) {- _7 U; a3 r2 X' G0 F% I& z* ]7 r
socket = new WebSocket("ws://localhost:8080/myapp");
8 }. H" N1 F' p- X9 ], e( f
socket.onmessage = function(event) {
) Y6 @) w7 `: _* B' H) M6 g9 b
alert("Received data from websocket: " + event.data);
% W @( @0 Y% W7 [1 K: \& P, u
}6 Y. T% y5 X! d8 g2 ^
socket.onopen = function(event) {: B# O$ E: \4 }, {$ r$ ]3 `
alert("Web Socket opened!");8 q8 e$ j% ~# u" z
};
, w/ H) N6 b6 L7 E9 P9 L* N( ^
socket.onclose = function(event) {% F7 K5 s- w. b0 I
alert("Web Socket closed.");
}) x# ~4 E" Y1 {
};
( ~5 X7 z" x7 j% e0 h
} else {9 s$ Z$ S' G4 [9 S% {
alert("Your browser does not support Websockets. (Use Chrome)");
! ?4 b3 V- u3 L6 t
}
! [4 x, I* o( ^1 k* Y) b, R
6 L H$ b7 o4 M/ }9 v
function send(message) { d+ x! r7 Y& h! y. A
if (!window.WebSocket) {3 G& Y8 _" J7 X0 _6 P
return; w# i! x2 I" O
}
9 D5 d0 D8 g7 _3 O3 N s
if (socket.readyState == WebSocket.OPEN) {" s7 g- \$ r( {5 J% E
socket.send(message);; @2 f s2 w7 A% J9 ]9 ^4 {+ o
} else {
' W, k, r$ |* ^) Y! p
alert("The socket is not open.");
2 P/ r) o0 X, @! c
}
5 t) r; [# e- P9 l6 h& b/ r3 ?
}
0 R: C5 s! H& T+ y) `1 m. V4 u$ c
</script>
% X$ N/ L* Q. j6 p5 J3 j$ Y& P: p
4 w' n( Y O/ T; M- }, ?
</html>

复制代码

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

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