浏览器使用WebSocket实时通讯

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

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

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

复制代码

, R6 u2 M" S$ D& H
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
8 B$ n* G( U9 p( U8 f: z! ^) l! c6 g' I. e2 B: x% W3 g, N

+ j- I/ Y$ o6 n6 R7 n该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){- _7 w- l4 {3 U1 s" y$ @
( z5 g3 l+ m& x
//打开* X7 c; d9 x/ a
, n) E" {! j; z9 z4 D
}" D6 { R% R. {, v7 d
4 w$ X$ g2 V" F' l% y
; @3 f \' E% g i) {0 D
socket.onmessage = function(){
8 c2 K! a$ Y% R8 B7 I; t8 y
) a$ [$ N4 }6 v1 J
//在event.data消息数据+ ?) d2 F5 K N/ o% r- n b( q
3 U! Q' _* t9 u7 u
}7 i2 c: p- I( G" S+ Q
$ A8 R* w; F; e- x$ W8 s8 x# U
socket.onclose = function(){
% @" V# S6 n% X
( q; ?8 J: b5 a
//关闭WebSocket
: v6 I4 Q7 K8 O' A% `$ _# [" A$ \
$ t) M/ o" a# k5 j0 H% j
}
0 b1 h" |2 [& K5 v8 }
, K; J. f4 p( a1 ~# V' a l
socket.onerror = function(){% F% ^" n1 P/ ` q& P
& r$ K) q6 A5 h8 f; V; {' B% }
//错误触发
: c( g5 F2 v3 g) i3 _
$ P. [$ k$ F: Q7 o6 x$ O1 M
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>3 I( {7 K B# Q! h, c
<html>
5 ^& S( }) e- v0 j6 Q
q& S" F* N( Q. G) J4 G0 P
<head>4 i$ A6 f v) f: {4 p
<meta charset="UTF-8">
- B4 n4 A1 S* m0 y* R9 C5 A
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">* G2 U5 R. x4 s, _
<title>WebSocket</title>
* E N {& F6 u# \ p+ |
</head>
6 X# L) _9 b+ y% M p. `" m/ S5 I
9 g. F9 e6 s6 m; d B! ^
<body>1 O8 j# m0 }9 Q# a: b
</body>+ C" N P% D7 {& g: q( e% z& Y
<script>9 e( V' C) G2 ?+ B
var socket;5 ~+ B, P, S! R& o
if (window.WebSocket) {
4 h4 {; D' U' d/ g! K0 [6 j
socket = new WebSocket("ws://localhost:8080/myapp");
6 i, L% q. Z; T- V# e {
socket.onmessage = function(event) {
" K; d3 f+ d) \# X/ I) v
alert("Received data from websocket: " + event.data);. B1 ^5 Z5 L% K' x8 U' L$ Z
}
, C; D0 K2 P* ~' U! ^
socket.onopen = function(event) {; Z, D( C$ P- w+ R( g
alert("Web Socket opened!");2 W1 }, |/ n+ T8 W( w5 {! v1 Q
};
4 A# r2 H, v% q8 Y
socket.onclose = function(event) {
/ T; B% l/ z0 J) R2 z7 E
alert("Web Socket closed.");
; C5 K" K6 R8 }3 M; O/ D
};
- g9 H5 B, g: _6 ~ Y4 V
} else {
% ~; S. |- y0 i* s* ~/ E. x5 O# u, S
alert("Your browser does not support Websockets. (Use Chrome)");/ j4 F: N' t' v: @" _' Q
}% F; o8 [! }# ^# T1 Q' f6 ]
3 Z4 c" w3 l1 K: O+ R# X& U
function send(message) {. [# _4 P( {( C
if (!window.WebSocket) {
, y' u5 N1 m( F3 v, h( w! e
return;. I8 y& R2 z* ?) \4 F" ~0 i$ X5 f1 s
}) Z, g7 `8 P$ k8 u$ f' q# I
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);7 n( M2 R g- i6 J1 d
} else {" Q% Z b4 U7 C2 H4 u& ^* P
alert("The socket is not open.");
: z0 P2 D5 e* R2 d O5 Z, W) K" K
}8 m; n; k- l7 n$ O1 e. I3 r
}
5 A7 P# Q/ T( e$ C$ z8 W
</script>
+ A$ b6 I/ p" y0 {* C+ Q2 X; W
3 R% }0 E# [: o/ p" r) [& ~# U
</html>

复制代码

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

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

浏览过的版块