浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 - v6 z6 b5 l! H" k4 n; }* a) t* e' [

. L7 w' } [0 T" w
1 e0 W! s1 ]* ^该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
. g, W& {9 |3 _; H( s
}
: e% c- f8 K3 t' I, r; c
( n, |6 ^1 _+ j7 T! T3 ~
socket.onmessage = function(){6 u4 [% r5 M* U/ c2 B/ a D
//在event.data消息数据) }9 q9 O; X: M j6 F. W7 [; w
}+ V" C" D' z F1 W. o
) V$ {. _/ k, x8 _2 M6 F+ w* ^
socket.onclose = function(){
2 |' m5 B; k; i4 F0 U( |
//关闭WebSocket
) q: f+ l9 K: ^% p7 C
}( O( b# S, E, @# L2 ~- N/ o$ {4 A
* _; R) Q% I+ P/ t, L/ _) H4 h3 w; F) x
socket.onerror = function(){
, Q: ~" E1 n6 R1 c6 e
//错误触发8 p* r* e' X) j0 h7 n* j/ k0 r! j
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
/ N7 Q6 i0 g' J; ~3 W
<head>
3 {& D+ ~" ]7 d2 F1 T
<meta charset="UTF-8">5 v; W) _2 H* ^/ j! q1 l9 T! I% s5 u
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
, f9 L5 D& H3 S
<title>WebSocket</title>- |: G' H; ^9 w
</head>3 s3 r* U8 I) ^3 o9 `2 M- ?, h
<body># u0 C7 A: |% J1 O0 Q* k. Y
</body>
6 q: o. {$ M$ D
<script>
( ~% ~* O; c1 E& Z* ^& Z
var socket;
( Q) c! E& k* Y! d) @
if (window.WebSocket) {
7 {2 D8 { W+ I2 w0 a
socket = new WebSocket("ws://localhost:8080/myapp");
* C2 n: q' ?; M% G4 g
socket.onmessage = function(event) {- N$ r, [2 f7 H( j8 U& z6 ~* m
alert("Received data from websocket: " + event.data);
& ?1 I) a$ p2 y9 u% g' y
}
( [) A& m. ?' y
socket.onopen = function(event) {
& y; ^) ^9 R0 d, r' p
alert("Web Socket opened!");" d0 i0 `7 H2 w D& s% H7 R+ R
};
: |- I; Z# }5 z4 D
socket.onclose = function(event) {2 Y( S$ l7 G5 b' X
alert("Web Socket closed.");* T9 p( w& M! t
};
7 O, N7 u1 k. C8 ~" Z
} else {
) c6 D1 R, g$ |$ X; X6 ?. f$ s7 G9 P
alert("Your browser does not support Websockets. (Use Chrome)");
/ A* |# F# ]- x
} |! A$ }, ?$ O* u* I! F% q, c
2 ~7 ]- l; H q/ C2 D+ S' k
function send(message) {8 Q. s1 C. F. G; d
if (!window.WebSocket) {. A* m/ n5 S5 |3 ~1 g8 g1 R
return;5 X4 w5 e( N1 i7 Q% B% ^1 M
}1 k# w* e) z; H' O
if (socket.readyState == WebSocket.OPEN) {8 Y7 g/ a' n4 ]
socket.send(message);
3 s0 s o2 P$ i1 U) m8 {
} else {
! Q" H P i) P8 s
alert("The socket is not open.");
5 S8 e& l# v0 _2 H
}
" _5 l$ U* U2 d- `; q2 s: V2 m. g
}! E1 |6 {6 v5 q9 G) p+ C
</script>* s ^) `- \' E* {+ n3 I% e+ y. i
</html>

复制代码

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

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