浏览器使用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:// 前缀。
: X7 M7 r% h: |$ u8 O" k2 |3 Q' A! B* A7 J

2 L5 @5 X( i$ z! t& q0 X: b4 u该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
8 U# U$ O% q- t* v: a3 v
}
- M- n6 @. i4 W+ T( ?
1 W0 a: I$ ^6 a6 C1 L9 Z; O2 L, l! f
socket.onmessage = function(){) S& S7 M) H; @
//在event.data消息数据% x: a8 Q6 x4 W9 X4 \# p2 g F
}
L6 K) C: [- C( O. v
8 X7 y4 |3 [4 {' g8 B
socket.onclose = function(){% S. [2 G/ r8 b# B' r! ^# R l
//关闭WebSocket
6 p: x" p& ~: Q( ]: `+ z7 A: C9 l6 K
}1 q0 b/ N1 u3 t
5 g" i& |! D; d
socket.onerror = function(){0 L, v' Y, W4 H
//错误触发
* ^8 _6 e! y2 Q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
5 [) v# d6 B# p' j& k- p
<head>
/ B7 o, E9 S' G7 | y
<meta charset="UTF-8">! S- Y; ?9 E+ q/ V1 |
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
" h4 f" y- f& I' ?+ [
<title>WebSocket</title>8 W5 K- W+ l. Q3 p+ P0 h m
</head>6 s0 B! y2 N% D9 M) w
<body>% J0 U& m) m0 i6 S$ u7 ]5 m4 B- B
</body>
) k0 P- i* {- O& c9 }# ~5 w' k* T
<script>
k( g3 j0 E& @# Z3 D4 p
var socket;
) _3 ]" f0 B, N" a, n* r
if (window.WebSocket) {; h3 o+ V; {1 ~; I0 @
socket = new WebSocket("ws://localhost:8080/myapp");) J7 Q8 R$ t A
socket.onmessage = function(event) {$ s! [! Y5 X) q. @5 f1 D9 ~2 S T$ w
alert("Received data from websocket: " + event.data);; D- B3 {# o' k. L' u. I
}
( o% O9 `1 b* [3 E5 X; M/ J9 s
socket.onopen = function(event) {
. h" E" s; W$ \) p, |% E
alert("Web Socket opened!");8 Q: j0 s0 u, ~. P% O' @
};
& B! r3 h1 K( Z, @: {6 ~% c4 ~ I
socket.onclose = function(event) {
% g5 Y( h' s3 z2 b7 A
alert("Web Socket closed.");' }( D% s/ T& x. N3 o# n
};) ?# Q: u0 B4 f3 p4 L
} else {
$ f% _& G- I) w( x6 g I% ?
alert("Your browser does not support Websockets. (Use Chrome)");
3 @+ {, Y3 K+ W$ G2 t- {
}
* i4 G) z( [/ }$ w: T4 \
: x3 S8 ^+ p3 i9 Q3 T
function send(message) {1 f! Q6 a7 O3 Y
if (!window.WebSocket) {! J3 c( r2 w- ^( V: v) ~7 F! ?
return;
( b' k, {7 o# Y3 E: U' n. U
}
/ q& s4 r7 u2 l/ ?/ d
if (socket.readyState == WebSocket.OPEN) {/ O' i, u+ \- k2 T/ B
socket.send(message);
: i6 a, t d* H3 g2 k" s4 g
} else {
' @0 c4 ^: D( D0 T( N
alert("The socket is not open.");
: Z+ \ H/ ^) R( Q6 e
}
7 f3 }5 [' i* W
}
! O9 e- o. i! B$ A
</script>& C% ?3 B. D/ X& m* l) ?6 X) X
</html>

复制代码

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

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