浏览器使用WebSocket实时通讯

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

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

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

复制代码

! k" ]" { Z3 p2 }2 G: _/ B与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 5 A# T7 Q6 i, Q: `5 {# Z

6 Y/ z1 E9 E- {2 d9 k6 P9 N; O8 a, R+ U6 G8 J- i
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
! ~) ~: R' ?) l, X o
6 ~2 W) `1 ?/ N: }
//打开- ]. C+ p% D O- A! C7 v* p+ `
}! [$ u d x2 P+ }
}; s: i" N2 U9 y' J6 e# Q
8 g' c- ~! ~0 Z s, ?5 L" H4 U ]" k
1 _+ T, D4 K! A8 F, n
socket.onmessage = function(){: z) ?/ ]8 H. J/ M4 e: O
- O- Z& q% N1 ~( h
//在event.data消息数据8 Z: {6 C& N4 r0 v% J
! y6 Y/ n5 V9 s( V1 l" a
}
9 W* G& v. m! V0 ~9 I2 }- k
: Y" u! ~- P& |& X- H7 j
socket.onclose = function(){
0 q5 h6 C" _ x. V% m* _# N/ s3 U, k
8 [6 d7 l; ~ Y3 A& A& e
//关闭WebSocket5 |# N* A/ U1 I F
}& _/ N! E5 X' }
. ]" n$ p2 Q2 Q6 @" B
socket.onerror = function(){
3 C1 a* m; N7 G2 a6 T
@! `6 J6 q' Q7 _! ^
//错误触发& f8 B( ?8 u @. t
$ d# {/ H( q. A/ o0 Y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>4 m, S" A6 \$ {3 C0 U4 g4 i
<html>
* R8 x2 D* D3 o
+ T4 j, q0 U7 K- }- C3 k& T0 v
<head>! J8 y: p+ M- ^2 T
<meta charset="UTF-8">
5 B3 ]7 d. U# p- h7 }; _6 n- |! R
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
) x' o* Q! |7 G6 `, M9 Q
<title>WebSocket</title>: n; c6 U- j: H# L9 c' m) T8 q
</head>
2 P, l4 k: y2 S' A# a4 J
) G/ ]2 h5 b' Q, v
<body>
) V1 p7 m% A7 B9 u* K' s2 K
</body>6 [; E! U* d0 R. t' C( h
<script>
0 g* u) J$ \0 c; j7 \, q
var socket;
! L' I: R4 @+ p+ Q0 b6 ~2 y! ?
if (window.WebSocket) {6 C/ u$ U; C: R6 |3 z' @( |# { L) E
socket = new WebSocket("ws://localhost:8080/myapp");
2 E) g- W1 K. G7 q7 r
socket.onmessage = function(event) {0 i; C+ H; Y' u1 L, c) p( `3 a4 |% I
alert("Received data from websocket: " + event.data);
( _6 y9 [, O$ X C
}! u1 X. k0 z, R6 M' E( a% g. t
socket.onopen = function(event) {/ ?1 D6 ]1 B$ O- F ]7 _% C
alert("Web Socket opened!");- g! B( i) e6 r, O
};7 G: ~5 z) F( G3 |7 Y# G8 \% V
socket.onclose = function(event) {% E3 d& v& B( E/ y9 J8 Y2 X, N) t
alert("Web Socket closed.");& D* a S7 L: {/ U
};% S9 i1 c( ]' K! K& u* G/ D0 X
} else {
+ g" M- X. `" a9 J- y7 o% ~2 z
alert("Your browser does not support Websockets. (Use Chrome)");
- n4 k `( K6 f k
}
( C$ |6 ^$ M/ a( Y7 d
& w" q/ ^, i N7 a5 w' J; h
function send(message) {! m. g% k7 X# t, y6 k- ?$ S
if (!window.WebSocket) {5 I) U( @+ _8 u6 u \
return;" k A. o' Q( a
}; H9 a7 n2 ]9 X( V4 y$ p9 [
if (socket.readyState == WebSocket.OPEN) {
2 s" N- M* k; m3 n+ i
socket.send(message);
j1 f6 C5 ]8 k# T
} else {: J$ p8 G9 ^9 J! y4 K
alert("The socket is not open.");
/ _. N) i3 t- d, J
}5 ^! R- } u( _$ K: @$ C1 T5 E
}; b, J3 S2 Y( n5 b' |
</script>
# x7 L6 f0 E0 l" V- l. g
, z" l9 t, ^) |) n" |% d
</html>

复制代码

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

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