浏览器使用WebSocket实时通讯

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

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

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

复制代码

. L/ B% b& l8 g+ M2 y4 b# Q: h3 Z
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
5 l" F8 Q) i; z$ \" S. Q; C9 |( @0 Z# N* b3 P: X# w% p

3 z( j) }3 [. P0 n该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){( y% A1 F. V$ F5 h1 p8 p, K1 K
; k( L. n4 H3 b' A& m9 G. | Q& O5 U
//打开
7 Z1 w( H( D* ]# P
4 j* J0 e- `* c6 v) c! M2 R
}
0 M# w" t' `# O4 |8 Q M
1 ^1 l# W+ N8 E) s
~ |' V6 n' ?2 x& Z
socket.onmessage = function(){
' f0 X' Y- [# T _- y2 U% Z
9 \5 L! v- z0 d3 ]5 w3 H$ H' S- s
//在event.data消息数据
' X& G! k. {! Y0 A1 ]) Z+ o/ y
2 A0 _3 M( `1 i; ?: Q
} z' ?9 H" y$ |6 Z' v& G' s/ B
! o0 S* ]+ X1 @+ E- H% G* A% D
socket.onclose = function(){; H$ I* F' G; v, L( {( O
8 y) m$ J) F& M) y/ y; B1 `/ ?* v
//关闭WebSocket6 q, L; {. E; y3 c+ n5 K- Z2 \
8 c$ O3 N- |8 e2 J; y/ q0 K, R
}! }6 l0 z' w! R& _
+ g- q8 {6 F+ v- E7 Q( O: u
socket.onerror = function(){1 t6 x0 u* ?+ [% l
g7 b: F& \+ Q' w- P; v3 ^
//错误触发- X* M% J8 [0 F; F
C* K1 ?5 }& _ _, j7 H! ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
' E- _/ z6 _$ \! j! c
<html>6 K. A& D B: V7 @; S+ K) I. r
}) h L# }6 b
<head>
& d1 J5 V }0 m1 y* E* Y% ]
<meta charset="UTF-8">' B* R7 S$ R! }; y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">* L$ Z3 h( p; O. ]8 I; @# B2 [9 U
<title>WebSocket</title>4 U' T/ w% j4 ]1 t
</head>) G) Y0 `5 B8 i% W( ^0 m
9 d' x% c( B M' X1 y2 d# I1 t
<body>6 R) q5 q( b W5 q1 v0 F5 Q
</body>1 e" w' x0 w% p2 W
<script>
. A4 g; ~' p `& b& j! h: o
var socket;+ B; n& C* }. y5 M# V
if (window.WebSocket) {( p0 C" E% O3 V9 ]; u8 K; _
socket = new WebSocket("ws://localhost:8080/myapp");
% Q- P+ C4 p2 q' a6 i# w& }
socket.onmessage = function(event) {2 u1 M" p( {2 c& A
alert("Received data from websocket: " + event.data);
! ?6 T: G# [3 J+ P R8 I9 ~* F% C
}
% {; M9 ?* ~( x7 _" N: u8 z
socket.onopen = function(event) {" N8 `" `- m4 a7 @& q
alert("Web Socket opened!");
% k- w7 ~: x8 [$ d
};
" C* h7 [, N! L9 T
socket.onclose = function(event) {0 j8 S3 X% a& r0 D& E7 B% Z
alert("Web Socket closed.");
3 e7 n9 j' N' k& Q9 R# j2 q' C- T
};1 U+ g8 p* X5 K( a" n$ F: [
} else {: O2 G: V9 @( O" z) N
alert("Your browser does not support Websockets. (Use Chrome)");0 @+ j5 @" Q" M9 ~: P+ d
}6 E; h$ {& h8 q, _3 ^( e5 A9 C9 X
! U) c- _3 B7 W8 o8 a
function send(message) {
/ ^- z! u; |5 ~. c r, q. G A
if (!window.WebSocket) {
) s( J e/ i% J( ]! A2 }
return;" e; {: z L% X( O/ |
}
1 E& T6 t( Z7 c7 W' H& l* I
if (socket.readyState == WebSocket.OPEN) {' W* P+ Z* q0 Y: s% }
socket.send(message);9 f- Y* p* c5 G: Q) Z
} else {
( k! d! E9 V; |) r [6 k; G
alert("The socket is not open.");
' p3 ~. j/ w2 ~, g
}
* j* W1 P$ `% p" {7 b, g- E6 s
}% h, h+ ]" ~2 _3 {; ~* A
</script>1 `5 `' u. t+ f0 b: Z; C
/ Y* P7 @/ D1 ~3 ~1 m; }# ?
</html>

复制代码

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

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

浏览过的版块