浏览器使用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 {* g4 |& \6 ~; w. s$ Q+ m" Y' E与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
& n. I- a! `0 \# P7 e# Y
* x4 S# R8 {7 B7 j) b1 U6 M1 S' X* J, z) G: T( E' P
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){& J3 u$ U) Y8 E0 _+ f3 @
6 R v7 E z1 n- B3 H( ~
//打开
0 }% E) G0 @$ s$ ]0 N& E
3 F, P( @# h" o6 |/ \: r
}1 h# J/ a2 P8 ], ~
/ H. u( E/ g1 f( l) e) c
& V' s, {) S/ A& [" C# k: h' j
socket.onmessage = function(){, g y! |% j, h/ h7 l* ?3 T
/ }' z3 L) b( T: r
//在event.data消息数据
3 O0 V/ R9 p# f
7 v) {0 Y& E( b- f) L% W" ~
}
. M! H& v' I6 k" Q: Y4 |
: p$ N8 K. e6 ]
socket.onclose = function(){
' V6 H& z3 C# P, J
2 a7 B0 X9 V0 U) _7 S. r
//关闭WebSocket
3 w3 S. c5 F: ~9 m9 d4 u
# a$ \/ w. }* D" Z8 t5 l' O
}' b8 U, S ~! a. @+ M0 g
5 B: Q& v6 f. d8 D- I7 k! D
socket.onerror = function(){
, K9 I9 G1 T' ?8 p+ [
" |0 s. \6 m4 ?9 B) @- _/ S$ {* J
//错误触发5 M' _0 F3 w5 B8 Q
9 @8 y% x/ H0 u" C. i( g; F/ Y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>$ G7 M! l' l# K7 e
<html>- |" Z$ z" n7 y& L4 k* Z
4 ?0 g7 p1 d( g. h2 C3 }5 h( b
<head>
# e" l4 q# K3 ?- Z
<meta charset="UTF-8">
* x" z. b4 D6 x, Y* G/ f6 C+ m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: y. Z$ P" L$ b' r5 t% K
<title>WebSocket</title>. i% N" x+ r* G& V; W4 g
</head>
) y2 D" ]5 I/ @" @9 L M" Y
4 A" }3 D' o8 Y" k' o3 Q# k
<body>
, u e+ o; Z* l$ R# T& C7 \
</body># M) U1 e9 [7 W9 g+ o
<script>* h$ T3 |7 }$ t0 y
var socket;
! P$ C. n$ C6 N$ ^! R( V3 x
if (window.WebSocket) {
, @, y7 D* U8 c, d! x3 o
socket = new WebSocket("ws://localhost:8080/myapp");; v$ f+ G; r9 x% r
socket.onmessage = function(event) {
% e4 j! {" H) Q2 }; U
alert("Received data from websocket: " + event.data);5 ]5 A5 V) t w; p b5 i
}
6 ?: L; S }: A, K
socket.onopen = function(event) {
3 _0 W; `. q5 A3 }& |8 R% ?
alert("Web Socket opened!");8 s' V, g3 ]# D# q
};
9 `9 D4 ]! D) n
socket.onclose = function(event) {; l% ~3 s/ E V8 ~6 R4 {
alert("Web Socket closed.");
5 G! [, K" @$ l; V7 E/ k# O3 f+ f7 B
};
$ A- c8 R& h% C4 t2 K8 Y8 r3 [
} else {
. q3 U+ d( Q( C( Y* }" P `
alert("Your browser does not support Websockets. (Use Chrome)");
+ R' C+ A0 K' P# V# P3 C
}
. A( ?, W" T0 R* L1 W
& B2 j c. T3 s" e
function send(message) {& _0 e* O3 m4 z" G
if (!window.WebSocket) {
5 J6 G+ x* h; j$ h' @% n
return;
8 ?" }% d8 P' X0 Y5 t
}2 m- `) O: C6 i6 X2 T5 x
if (socket.readyState == WebSocket.OPEN) {, s' P+ e, u+ d8 l$ C D5 S9 Q0 G
socket.send(message);
! Z+ j0 ]! C' k. U6 y, w5 y
} else {* b3 W7 b4 B) B$ X) v' G1 C
alert("The socket is not open.");
9 T& O3 D$ a5 S5 d7 |+ v
}7 j% k$ t0 U7 ^
}7 {/ h) x: {- O( l b7 T
</script>
" t0 \. D& l) W6 \: A
# F9 o0 q+ O, x& j+ |6 j
</html>

复制代码

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

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