浏览器使用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 D* N/ ~! ?, t# w s3 Q与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
9 ~! e. {1 [5 _9 n/ O1 z/ f4 g7 e; _* S2 x, B, R

/ c% B ]+ |' G7 i5 m2 t t4 {该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){. F3 K0 t" p' x+ f) Q
" l) {9 S; Q) c
//打开
+ q+ s4 K8 \- N F
6 ?& {7 m" _- X- p4 D+ A
}
; S0 T" }0 m$ d6 W9 C8 i
- F% l! t$ F% X& j2 F
, L( F+ ~1 a( n# U: ^6 _: G+ I
socket.onmessage = function(){/ N; |" W+ r- w3 B! o
. F( N) c. f7 a8 N C, ]5 k2 s, ~* `. ~0 Y
//在event.data消息数据* i" Z, l' g$ @: ~* A. s3 W2 U
0 @* I' u& X8 a0 E: n
}8 Z+ Y6 d$ q5 Q, M$ M7 A
) ~5 }$ X7 V5 P6 ?
socket.onclose = function(){
' j# B: ^( P L+ J, `# e8 s
2 M" J5 N/ O% q/ m* ~8 J
//关闭WebSocket, N$ z" o4 l0 f- Z
) h4 Q2 @- E# U, C+ U. k4 R4 b
}; x6 o) d+ f2 B/ @$ }9 |0 ^2 q
. c4 m) z% V2 e9 k: l% [. [
socket.onerror = function(){
& L- T/ i) N" g, t. V
/ H: I: v8 E) J% L; s8 N$ y
//错误触发% L+ y( ?, }6 S* D# L
- N; d, f# F( U( }% S0 b0 ]& H% A
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
) C( o. m0 k' T
<html>
2 X J/ K* P1 o; W
8 a% T( h1 x4 p
<head>
9 M6 N9 j) o) D& E
<meta charset="UTF-8">9 K( h& Y0 Q0 N2 z9 Q% ]0 O
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, y9 X/ b' |9 R. R5 ~3 R
<title>WebSocket</title>
" ^. A. u2 `: M: V. u0 v% x3 S
</head>& l5 G. O4 c- O
! s; v( B% B9 I; Y. N: F: z9 q% h
<body>: c1 v: s2 O: i; t! s
</body>
( ?8 L: A2 v$ n5 `, q
<script>
9 f- q4 ?) W- z# U
var socket;
: X' ]1 |" U) T: [$ J4 d
if (window.WebSocket) {
7 s H/ j" F Q8 \
socket = new WebSocket("ws://localhost:8080/myapp");
! h* O+ o; h8 @' B+ l7 X
socket.onmessage = function(event) {5 d5 k/ k- p- t% t3 D$ J
alert("Received data from websocket: " + event.data);" X8 ], l$ B0 I3 N9 V
}, a8 i" Q9 t5 l' }+ u5 U
socket.onopen = function(event) {# M; {6 \8 ?& o7 m8 q4 @
alert("Web Socket opened!");" ~5 D, {: O4 p8 t% n
};
7 R5 M$ v3 P) s0 K& d; @( {
socket.onclose = function(event) {
: F' o0 [' N) k+ S
alert("Web Socket closed.");
: [- L7 n) o4 B/ P; p+ k+ t
};! `7 o: \4 Q2 d% R
} else {2 U4 z b3 e; c, C3 @' i
alert("Your browser does not support Websockets. (Use Chrome)");; Y T- N j4 D# M& z5 B0 A/ \
}
! b' c" G- V8 }0 I% w4 ^
8 h+ y* p4 ^7 i9 W( Z9 w
function send(message) {
9 z5 x% P' B/ \4 r( [# W6 f4 p
if (!window.WebSocket) {
( x$ s8 F4 B5 C1 G+ d+ M. m
return;
?. i( l+ i# W: z- S9 d5 E
}
5 j: ]: x9 }, r, I6 D7 l6 r$ J! V& k
if (socket.readyState == WebSocket.OPEN) {
, J4 I$ i& k q' F5 {& C9 z6 e
socket.send(message);; n9 P/ f$ V, P
} else {. |% i# K+ y5 W9 U1 @
alert("The socket is not open.");
- y& e0 b- p7 w0 @/ U
}1 U: E9 n" d, D+ E
}% B* U3 A2 Z c7 N
</script>8 N7 R( K3 S! l- y' b
- x1 P+ o$ E: V. Z' w. j8 C
</html>

复制代码

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

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

浏览过的版块