浏览器使用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:// 前缀。 ) A$ t& S! G% z7 A' S& v% d
% A. ^( H: F# d# u# x7 _) M

1 i7 M, n/ F# A1 Y0 w2 f" ~" D \该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开0 x, k/ t; c% t: Z0 T
}
5 d' j: t2 v, \$ Q4 G8 D- u
3 O2 P6 H1 h# [, M
socket.onmessage = function(){ C2 {6 Y" q. W" ^) V0 t* h
//在event.data消息数据1 Z J( z9 u5 k! C
}$ [. G. j" B0 Y/ K% L' G
# Y) L& b! o3 {4 r
socket.onclose = function(){" z; o+ F7 l9 H
//关闭WebSocket
3 k, ?$ q* u5 y. L) g
}# }4 f" D( w% m- S8 `
% J. t3 F) ?; t
socket.onerror = function(){
& [. z& F, ]( M- i4 B8 E2 _' ?, a: w
//错误触发
- n) ?, M! U1 t& a$ Q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
) `! O4 m% l7 j: s3 M! d
<head>4 a# e& S/ G, N9 U6 n, x7 K
<meta charset="UTF-8">) i3 j( I9 }. n# B' R( D6 L4 I
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
$ m+ P7 e* e8 M4 K3 B
<title>WebSocket</title> K5 C. [* C: d6 Z. n
</head>+ s$ ]' \! Y* g4 I
<body>, k& p8 I8 y/ P: i3 U- j
</body>
8 D# h3 w. _8 N) [: ]* L4 b
<script>+ ]* ]- Y5 ~+ W0 N' w( y- Q! r
var socket;
! ]( K4 F# U$ I, I
if (window.WebSocket) {0 ^. R4 g& J H" y
socket = new WebSocket("ws://localhost:8080/myapp");- K3 O# d& v( l
socket.onmessage = function(event) {
1 V- e4 H& P- N6 \7 \, o' d9 v
alert("Received data from websocket: " + event.data);, ^9 s* Z1 M' P0 G: q8 @% K0 S
}
6 {5 K. m9 c9 v2 d" m: M) [: T* t
socket.onopen = function(event) {
9 U* }/ _% t$ E( r
alert("Web Socket opened!");# k6 ^# t% z! h* j K
};& K$ M- J, ?3 z) ~$ S
socket.onclose = function(event) {
' R, h* N8 F4 Q
alert("Web Socket closed.");- V( I; B7 v$ X, z3 ?7 n' y
};1 f* Z( m% E1 d5 H: b3 @" s0 M
} else {
& c- a* g! n$ P! S
alert("Your browser does not support Websockets. (Use Chrome)");
y' f2 d$ G) L% _! l! Q
}& U% f5 H$ S; D8 G
5 X( _+ v7 ]( J* T$ W
function send(message) {) U" L5 A" a' Z) f4 T% F
if (!window.WebSocket) {; a8 v8 Y( Q" _
return;
! ~9 G2 D5 B& ~0 e0 o7 G
}
( m# h+ l# p6 I' Y
if (socket.readyState == WebSocket.OPEN) {
4 i) q1 D. S1 y+ ~4 u: ? e1 ^" X: A
socket.send(message);
; W$ Q' h6 r# f' z& H
} else {" K* W$ {1 A7 s9 D; E4 } Y+ g
alert("The socket is not open.");9 b0 j9 t W* U) k
}
S' H: K+ F' A9 {/ y- T8 F
}7 d# t! M, q% J( |4 i- B1 e$ K8 O
</script>
4 Q5 M0 Z, X2 W
</html>

复制代码

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

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

浏览过的版块