浏览器使用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:// 前缀。 9 Z5 l) |, H5 b0 T

) |% m" @5 B+ \/ J* _% \1 W3 n Z. P( ?8 p6 @0 z5 ]* z6 u0 C! V
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
3 Z) O& l' N8 E! b! [1 R
}
- K+ o2 ~3 `( ~9 B/ j% H1 |
6 q+ p$ ^+ S$ |' T& a
socket.onmessage = function(){
" v8 O7 Y: F' R1 P
//在event.data消息数据0 }) K6 }! ?, E" l0 E# }7 n, g
}
3 _& ~; y% e: O$ J( E
j" t6 r D5 X# Z
socket.onclose = function(){
! G+ P3 e* J7 g0 k* @
//关闭WebSocket
! K3 o! a, `! e% X
}; N9 h, w1 g2 [/ Y8 L2 t% a
) m8 ~5 u: h9 X6 X
socket.onerror = function(){% ~/ C, K0 f) v+ X5 g( |
//错误触发
1 D$ k" G) H5 K
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>! |. z3 {+ Y0 T) c E
<head>
( c0 n! b. R) y8 d N u
<meta charset="UTF-8">" o$ Q9 n: f" O. U9 a6 y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
% P7 t! I. t) r Y
<title>WebSocket</title>
: I; u+ j$ d# h/ U
</head>4 W* {+ }7 \: z: U* d7 e, S3 t
<body>1 t- Y6 K' P2 T5 m( B* J5 ?# I
</body>* p3 [$ v! [/ F& s
<script>
4 R1 ]& }( I' Y% S5 Q' f7 y: v1 |
var socket;
% ~2 I9 q1 a$ e
if (window.WebSocket) {* c5 U4 q. R! r
socket = new WebSocket("ws://localhost:8080/myapp");
2 m# E2 u. ~, K: N$ y
socket.onmessage = function(event) {
8 n8 m: ?9 e- o4 O: u2 O9 f
alert("Received data from websocket: " + event.data);
' C3 I, }. K: n+ ^
}6 J. D" v( @1 F* l+ E; I
socket.onopen = function(event) {
: W0 W+ P2 S2 e+ N, U! @
alert("Web Socket opened!");
' w) \7 x( n' l+ E; O) z
};" i2 [8 O1 w0 n7 y( h
socket.onclose = function(event) { R- ^ K2 v+ X" g. f+ O
alert("Web Socket closed.");
6 ~* p) ?- S; `3 B( u
};
' @% q; d& N5 T) o% d* g2 c
} else {7 v% Y& S! K; h5 ^4 y
alert("Your browser does not support Websockets. (Use Chrome)");
) a0 p* n/ u, t/ I5 ~. |2 I6 f: F
}
8 i, W' R6 p5 Y! v/ u+ d, k$ v
* s3 j4 H, c$ S8 _$ a/ A
function send(message) {5 W, I/ s B% |" B) g9 J
if (!window.WebSocket) {. d' g* { p4 J2 ?5 k- l1 {3 v
return;
}8 |/ z. U' w7 p) a8 y
if (socket.readyState == WebSocket.OPEN) {0 K' Y+ m0 ]+ v
socket.send(message);: C- _" x- f0 d* K; y$ d
} else {
9 F4 f0 |( @& o
alert("The socket is not open.");
6 T5 }6 n) F7 ]" [( g
}
. n: p" {9 ~" p g
}6 E) {0 |" |4 f
</script>
. u2 H- C. x# j& I; w- n$ C. \0 R
</html>

复制代码

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

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

浏览过的版块