浏览器使用WebSocket实时通讯

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

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

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

复制代码

4 E5 F% e- k5 o6 |" _8 J! }: N: b1 ?4 P
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 $ K( S T. V* U R E
: d9 H6 N r( l7 Y3 ?$ r
9 [5 t, T+ U& C& c
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){: F3 ^; ]9 Q0 T" n
+ [$ g$ {( c* _2 S9 N
//打开
, d: j) F) x; j* R6 {$ {
% v0 G# p/ |$ S0 ^
}
/ i$ M7 |8 n7 n m0 s: {9 i+ {
8 b; `2 _! ^& b. W' I8 c0 _1 Q
" U8 j2 K2 j! @
socket.onmessage = function(){! O' b% D5 E: A( z" A) t
3 h& A" |7 K; L, E! ^( Q) K; x3 Q
//在event.data消息数据: A( F1 ~9 a4 t7 R) d, S
, ?. r0 b) }. I0 n2 ]
}
7 j, T3 E, M) c' F' i: {
& P: i5 i E0 h( G
socket.onclose = function(){
' e. V& S& L! h1 \$ A |
% ^; G- V9 ?/ F( H& ]! |
//关闭WebSocket2 ]+ J5 k2 E$ }' d, `! w6 m. Z
$ S5 N' g3 s" _0 M$ R$ @4 [
}
$ C1 E! F; V9 A4 S( B p3 d# w3 f& u
6 G* i* c' J$ ]2 |0 S) C5 G
socket.onerror = function(){5 \! l" {, ~9 @, Q2 q
) H% _8 l( a% I, H' b4 a% N
//错误触发
1 t" f9 _) B# x! m. f9 Y
2 ~9 n6 z; _; z" }/ M, j
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>1 P7 I' m" z" {0 ]
<html>, Q4 B1 {: g1 q' _4 }
. l6 D0 {4 K6 J9 L/ W
<head>1 a& V) _$ e( I+ s
<meta charset="UTF-8">; j% k! h+ n8 X4 Q3 B
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> g' D! z' o5 {# O. \2 q
<title>WebSocket</title>
6 k0 f% P( H7 L& b& e( Q/ I
</head>
( o. @' N$ ^9 U
: J3 b- u6 n5 o/ P9 b8 X
<body>% K) L, y: V5 v" S. e! a
</body>
" L b. d7 U. v( V% p
<script>& ]2 r; N* R% c4 A1 c5 A
var socket;
; R8 P! o( N; B3 i. s7 q
if (window.WebSocket) {/ i) r. N9 M J! l6 R
socket = new WebSocket("ws://localhost:8080/myapp");7 P% G& U) t: Y9 X* X
socket.onmessage = function(event) {. g; h& L! q. h
alert("Received data from websocket: " + event.data);0 A: O( Y0 r7 E& p+ j* L
}7 ^# U& r" m; }) V9 J# O* e; `
socket.onopen = function(event) {3 |* m5 \; ~2 L% A i1 Y* s
alert("Web Socket opened!");
, i8 X: C4 x2 \% A- X/ I( U' O. {3 ^
};& h' L Z- Q% E0 m- n2 [" E: L
socket.onclose = function(event) {
$ ~8 g# w& |" a. ~# S: \7 M
alert("Web Socket closed.");* K; D$ \0 d3 T7 p9 D$ B1 l
};
$ n+ \8 C; g2 f% q# ~1 ]
} else {; ` G+ b" u- b% `1 ~. S5 N
alert("Your browser does not support Websockets. (Use Chrome)");5 ]( E* b" J$ H4 p
} V" H9 k* ]$ u8 C# Z0 J
) l ?$ x) N, h7 q( D( \ B0 C1 G
function send(message) {
( V8 {- A( S' K$ E' E* k
if (!window.WebSocket) {
0 K; S- W$ C, |
return;/ C, I: z- y$ L5 I: U H$ W# U
}
4 U' V7 s" i3 j$ \& l! g
if (socket.readyState == WebSocket.OPEN) {! p0 m" }( B6 x+ m8 c) {
socket.send(message);! z1 N8 H- n3 j" V
} else {. @$ j9 ~" u1 i8 d3 @% ]0 |- |) |
alert("The socket is not open.");
" C8 a; [% O# ?8 o
}9 ]# ]3 _! i* u
}* k- V4 [& [3 S
</script>4 X. W3 I) C$ N( n8 G2 L% V1 E @
9 V, y0 f: j2 B4 U& W* J$ L
</html>

复制代码

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

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