浏览器使用WebSocket实时通讯

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

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

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

复制代码

/ ?2 c% V* I5 t1 ?; R9 N与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 6 B( ~# n4 R$ w8 k% ^9 o6 u6 L' [
7 q% D3 [. @! P) y$ A
( J; r0 J% u t2 C! j7 b5 `" p& W
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){! W6 L) a8 `. `* X/ P J8 I
w7 G1 c8 G( F" M b
//打开- U+ X, y* D, G0 S: U
# s% P( H+ g/ _, R9 W% o; ^ ?
}
7 I1 p" s! n4 K% M
* {# a- P2 V, D
- k& ?2 S0 f9 G0 C- n+ F m
socket.onmessage = function(){
" V! i& z7 q9 n! k
8 |$ r/ e( b" [; r x8 j' b9 K: G
//在event.data消息数据
* h0 U' q; X8 P
( ~8 b- e% Z# f% A9 b
}$ i. P$ L# Y* j# Y3 Z
- r' ^+ z4 A3 w- z9 L' O
socket.onclose = function(){
; k" D3 E9 S& G0 S* h
- b w9 O: x/ z% {( [4 O0 \0 b
//关闭WebSocket
! @$ ?3 s4 P$ c1 b& \/ a$ p& q/ Y) a
* H3 C0 g/ a. b; I
}
$ X9 G% R9 P+ @! s# V
/ t; W4 Q1 G5 f. ?1 A" S2 O2 w* N, N
socket.onerror = function(){
* ?+ c, ?8 q4 d0 Z. F
* K4 L6 Q* e& M6 X7 }
//错误触发
, s% j, h3 ~- r
9 N9 N: w6 u1 d* O- h7 b
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html> j) \5 U5 X6 v9 k* D/ A9 N o
<html>1 @# l6 x4 S3 x7 I2 j$ ]: @+ h* `
- _' j9 n! Y( L& l% B1 J
<head>
4 D/ }6 X0 D0 t/ s
<meta charset="UTF-8">% _/ v i! h3 R3 D+ r9 {2 e( F* @* I
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 x4 |# M i8 P5 f4 `* v& }: G
<title>WebSocket</title>
( H0 G' q: }! H! i9 X
</head>
2 ~; ^7 K/ i5 J! O9 b2 y9 s; b
: D/ G: y* l, s0 O& U
<body>
& N; t# V- v6 @
</body>
$ R. C/ C/ ^" t6 z: u, s
<script>
4 v- Y2 ^. S6 y% X5 X
var socket;6 b- T2 b) ~( h3 S
if (window.WebSocket) {( Q- M9 p- m/ V8 I8 P" `) X
socket = new WebSocket("ws://localhost:8080/myapp");1 h0 Z, H: n' K5 C: J4 S
socket.onmessage = function(event) {2 F( }; B5 v" X- M
alert("Received data from websocket: " + event.data);5 h& B3 J8 b% j2 n; s! T
}
, y1 `( b d c" H0 G! T: e
socket.onopen = function(event) {
4 `: A" s) }! _, ]# U
alert("Web Socket opened!");( f) i' @3 \7 ~
};" [7 j+ T+ i" L" o
socket.onclose = function(event) {& {7 x" b A8 p- k* P$ B, u# q2 ^
alert("Web Socket closed.");+ |% ^% A- v" H# S! ~
};
! ?0 l( i1 |+ Z8 M( N5 Y
} else {
* o v4 P1 F3 c& d2 u! a1 f+ K
alert("Your browser does not support Websockets. (Use Chrome)");
! C# \ [; y0 n+ n
}$ ?( i7 r( m. D0 O. p$ a5 W
1 U7 f. O3 ?6 R, V! Z+ C7 b
function send(message) {
# f2 c+ N# n8 N
if (!window.WebSocket) {
' F! l9 G7 Z- a& q
return;! l/ r5 W& V* ^- U6 c
}1 X1 |* Y6 I' t4 D5 d# u
if (socket.readyState == WebSocket.OPEN) {
- P R5 ]# y$ ~* H- k- y
socket.send(message);( X& \5 t5 s6 f4 X) \0 @4 ?0 P1 `
} else {: a* i A) T1 A3 r) T: `
alert("The socket is not open.");
( r: g5 O( q5 [% [) g8 V& p
}
/ _3 q: T3 y' J9 V4 a* y
}
@) S5 s% t5 I6 ?5 Y B" `
</script>* R* f- I3 g3 q0 O* h/ |8 L- |
1 W- Z& R$ Q* `, p: n5 a" ?
</html>

复制代码

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

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