浏览器使用WebSocket实时通讯

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

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

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

复制代码

8 n) T t: F' y6 s
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
% c2 [3 C! k( z0 B6 `; u8 C; B( @; e5 M

6 g- L: C8 x: E该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
1 N5 W5 F. r: `) G( w4 g- l3 {
' }$ `! Y; i( l x
//打开
# v P; e$ s" I' s( Y
8 w) _& S; q+ k ~" l( ?3 j' T
}. N% H! w' D; t7 F
Z' B4 Q3 i0 i4 _' L
$ w' U8 P4 l# q3 C
socket.onmessage = function(){' a6 w; A: @# d5 {6 @! i
: j1 z7 Z( U8 m$ Q, m
//在event.data消息数据
0 k/ D- m. h" b; F1 _, [
9 y r2 M+ G% h3 U7 |6 V
}
* b" J0 q$ J+ ?5 \- h
% L6 Y. y0 u) A x; m$ {- Q( U
socket.onclose = function(){& g3 j* M. _0 ~& @+ z9 H- `/ E4 b
4 B8 ]# @" M% Z: |( t2 D' W
//关闭WebSocket( d2 R+ w$ \+ v8 ^5 H& D% c( v
9 B7 b+ }. L; g) \6 m
}& ]+ y' Q: c5 B$ g' d
/ ]$ n8 E9 a+ l: _% A2 t6 _
socket.onerror = function(){# ~( b6 k$ n( @. o- _
2 v) d2 c7 ~" a) o
//错误触发
8 |. w% m1 Q1 w. j$ z8 d
6 h" P' U: [- n4 |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
2 V3 h7 d! i N ^( k$ Y; ~' }
<html>8 S6 {- E% G, {# P, x' t
+ ]5 q8 i- N) h' S% D1 O; [
<head>3 h' o* f" h6 q9 o; A8 p/ Y
<meta charset="UTF-8">
* C' o2 k) w. B3 d; e6 _
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">$ d' L: A, h/ M. f
<title>WebSocket</title>
# }0 O; t* C- `( }
</head># O* Q, g3 V% l5 n5 c7 L* W
9 V3 y! t5 Z G) i) d
<body>
2 m' \, ^+ H- V8 h. R1 r
</body>
6 h( c+ Q+ y9 I. L u5 i3 D
<script>
9 ^9 F, T( C& P' j3 m% }7 M
var socket;
% v. V: K; d$ e( a
if (window.WebSocket) {: E5 H3 x$ {% h( @
socket = new WebSocket("ws://localhost:8080/myapp");% j. G( m) G! e) x |( I7 F R
socket.onmessage = function(event) {0 ~8 J3 ?5 f) p0 P
alert("Received data from websocket: " + event.data);
4 F& K( J9 S+ N9 {4 ]/ f( C9 Z3 d
}& L# t9 V: m1 w+ D* i, g
socket.onopen = function(event) {
7 G; s% h& r5 }( J
alert("Web Socket opened!");1 n) W: J) [: a& @9 L
};
3 Y8 [/ x0 ^8 s* {
socket.onclose = function(event) {$ d8 W4 u2 I1 U8 O
alert("Web Socket closed.");
, W8 ?* i1 V& E( ]: P% e
};( T/ X* u6 A- R" j; X
} else {
& L9 U9 f6 F% e5 ?5 ~; w
alert("Your browser does not support Websockets. (Use Chrome)");! i. U9 r, K" K
}
/ j+ r9 l7 ~9 k; h9 l/ P! M3 p. b
9 T) Q" @- ]/ t! M
function send(message) {
b# q: l# ?; }
if (!window.WebSocket) {4 l/ C) w+ c( e( T5 }. L. i
return;+ E/ T3 Q% _+ r$ h/ ^+ Z8 C
}. N* y1 Z Z% h. l
if (socket.readyState == WebSocket.OPEN) {+ q# r! ^% i r3 D
socket.send(message);
* N9 e) m V. L1 R. U7 A
} else {
. d7 f" x8 H" h0 r$ Q
alert("The socket is not open.");7 P0 f. R) |8 Q8 T
}. t+ S& q* [. C( K$ Q& K
} f) @1 g O1 {2 g
</script>
3 C: X$ u( @# u" Z. ?
/ A" Q5 o4 s/ {9 M. J) }
</html>

复制代码

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

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