浏览器使用WebSocket实时通讯

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

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

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

复制代码

3 y: f, _! w1 m( l8 T' a3 I
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 5 _6 |- U" _. h0 f2 y; Q
0 A( a7 i1 ^3 N2 Q2 O1 \! h9 u

* X9 c* k' b) O! x该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
* ?/ x2 U2 k. s; d
, a+ b6 ]% N0 |# o& j, w. R7 L
//打开
0 ^* ]/ F: u, i' U, F$ n& I
+ J3 e3 }4 E W
}7 i# ?" U. A' D; e. ~0 n
0 F2 B3 Q9 ^9 g% d' k; f
L% t/ P# f# R$ |8 X$ n; J
socket.onmessage = function(){4 u8 u ?9 g0 d* V/ l6 L& t' V! j
0 R; L4 q3 K2 P
//在event.data消息数据
( g* Y8 g. ^6 V# ^
6 F4 w8 N6 M, K4 P5 O! J: I
}% `8 k0 w! r! ]% N0 X/ j
# k& G0 s) [* I/ }2 w
socket.onclose = function(){$ F @) C% L: Q4 Z( R* _
0 R1 b7 Z" X7 e! J; `+ n
//关闭WebSocket* R5 v$ _& Q/ P# C; o n3 M) b) o
/ ~& l& ~) Y& z$ N
}
/ F6 `- O' F; U$ |9 L0 p
9 K- F5 Q, _9 B# ~0 E4 r4 \- M) Q
socket.onerror = function(){
+ B' g4 D7 m. e O1 \. D
( l1 r @( v& o& _2 p3 t
//错误触发
6 i$ ` w4 S5 f" w6 b' q4 F4 k K
' f9 `' G; I* `& O& |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>) Y! ?. k( ]9 W3 i- }4 ]
<html>
3 m+ t. P$ d* R- `; j
; |8 X. t0 S1 p! D' Z
<head>7 ]8 L1 u7 l" @- \5 U5 f9 j; a5 `
<meta charset="UTF-8">
/ u0 y# U- \; T; @4 m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">( z9 W6 o) b! p8 `) ?; r# |
<title>WebSocket</title>% s/ r, `5 n* k0 i8 ?. I
</head>
+ Y: |! k! @9 T1 k
1 V% {; @' H; |
<body>7 q3 F4 v5 G' t3 \5 O/ V3 e
</body>2 B2 `: M1 ~+ y* Y2 d. J
<script>
" K/ X V+ b" F* B
var socket;
0 ]3 q5 M0 ]/ [- W& R) X0 d
if (window.WebSocket) {
5 u( \9 ?6 S- }) w1 Z
socket = new WebSocket("ws://localhost:8080/myapp");; y4 H9 F6 v6 J
socket.onmessage = function(event) {( S& i' L6 t2 X
alert("Received data from websocket: " + event.data);
( S6 T( _/ c" Z) o/ L
}" F" J! r C0 R n0 P/ K0 X
socket.onopen = function(event) {
8 c* E- E" h8 F) V* M' G8 l- `1 _
alert("Web Socket opened!");
) b- M+ m, `: k. r$ g$ s; T: Y& N
};! ^' L! H/ q4 p S! Y
socket.onclose = function(event) {
# c: F( A- q1 m. Y, w
alert("Web Socket closed.");
& N0 h b1 Z& H
};* |6 m: ?1 c6 ]7 t, a9 t0 x3 O1 G
} else {
" R" U* q' I s5 ~2 n! R! F: x
alert("Your browser does not support Websockets. (Use Chrome)");7 q7 G) M: i- v
}
4 P* `3 ~4 F( r
! D i! N% t7 a) ~
function send(message) {
9 b- o3 n+ ^' K2 D! e3 k
if (!window.WebSocket) {5 w/ B, l) i) X& G \7 s! B( P
return;: V! A; b9 `# }0 _$ z
}
9 H2 S+ h- T4 G2 q9 c! G
if (socket.readyState == WebSocket.OPEN) {
+ F2 P) i3 `: r' y1 o5 G6 _- O
socket.send(message);. ^0 `, ? B0 @6 @: S
} else {
3 @" {+ |. X# }/ w2 C/ M
alert("The socket is not open.");! @6 B$ u& I$ e6 J8 V V1 M
}& i% y6 _9 I1 [, Y
}
. T1 N% Z2 w |8 G
</script>! x; o" M4 H n' u9 }1 J
( s) c m0 |4 a; {2 \
</html>

复制代码

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

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