浏览器使用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:// 前缀。 3 t3 ]9 T! [! W' U, t# V

! y- g. S2 v) Z/ p3 W; F+ y0 L0 @: p
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开; a4 k# B* k7 W3 Q- K3 k, @% H% }
}( X8 C |, j( J* C: }) l
3 a8 f. b, `* r# S1 ?- n
socket.onmessage = function(){
$ g; Q# ~0 p! H+ S2 o
//在event.data消息数据# o+ {+ r0 m$ q* z0 p- \1 P5 j
}2 t: |7 \ ~ q3 ]$ K* L" I
3 @0 F3 y- N4 s ]7 Z' X8 f
socket.onclose = function(){
1 r% Y3 P. ~% N' V
//关闭WebSocket
0 |& L5 h5 U1 a; n" ]; R6 G
}& k. \! L0 H9 v3 ^4 g+ k
7 F6 n7 f$ e1 |
socket.onerror = function(){
, v( ]. s6 m0 k7 c8 t/ ~. U, R0 C
//错误触发8 }* V- q% ]7 ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
6 E; N5 ]8 v) D1 s
<head>
3 J( j, U# W/ G% V- r l
<meta charset="UTF-8">. }' n( h t, b6 H' X5 x \/ A: f% U) C7 o% F
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
6 B1 T+ n3 s9 s# {4 X" h& |( ^' [
<title>WebSocket</title>6 k1 G% Z. P0 J* H) @8 M2 d
</head>
" u% ^% |8 m$ V9 m- q% D4 l
<body>
& {2 h. o( @5 n
</body>1 g' U/ V1 y7 G. G. _/ W
<script>+ K& e' {/ c) K
var socket;
1 C9 x9 a5 b: h3 {& g& y- _" ?# _
if (window.WebSocket) {. J7 A3 X% E& \, O8 V' O' ^+ u
socket = new WebSocket("ws://localhost:8080/myapp");5 h2 R, s5 E; D
socket.onmessage = function(event) {, y: c1 h% f& i3 c1 V1 c* m
alert("Received data from websocket: " + event.data);2 F& K% h* ^, p* H8 i& R. y
}
2 G3 b$ z+ R, x3 o
socket.onopen = function(event) {
3 ` Z c* v3 l; c0 x8 s
alert("Web Socket opened!");
% C3 w! @3 {5 p$ m* u# q8 }5 i
};
: [( N$ ~5 Y2 ^
socket.onclose = function(event) {& S) K5 U4 E7 Z" F( |, u. o
alert("Web Socket closed.");1 t* |& a- ~& d6 E4 r
};: \2 r) d. Q2 M4 k
} else {) ?- u% \+ |/ S3 W8 r
alert("Your browser does not support Websockets. (Use Chrome)");. {( X4 I3 \3 X& a6 G
}
* }0 T$ i" }% T2 ^) O
$ G, M* V+ b% u/ D) A8 @
function send(message) {
. z4 |2 ] E- z! Q1 i" o& c
if (!window.WebSocket) {0 N0 }+ V- V7 {2 u& `
return;5 m) L! d# S' F! [
}9 C' e ^2 V3 _( y" ?- e8 B
if (socket.readyState == WebSocket.OPEN) {- `! C3 u4 u- d" p
socket.send(message);
8 b9 O- g+ E; C6 w- ^, m- _# {3 r
} else {
! ]3 k( O7 _* S p {2 ]5 I
alert("The socket is not open.");
- Q: X# K8 E+ p9 B7 M
}
' ^# D" v1 r1 }# K
}
6 K9 B" P, h0 J ^/ b+ S0 q
</script>0 f/ L# z: [: l: m6 q' j
</html>

复制代码

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

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

浏览过的版块