浏览器使用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:// 前缀。 - d0 J7 k6 z* o; I3 o5 v7 w, y
9 n( n% c' ~0 i
, z. O6 {6 ~; x
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
0 _1 ?( p$ I8 i! i% y6 j0 E( u
}
: I0 e* M \/ a6 O) k5 W, ^
1 j$ d4 S' F. T4 K; X1 k3 T, [
socket.onmessage = function(){
5 b) Y% t! N& C, ~4 I5 B
//在event.data消息数据/ U% f P+ R* U' k+ Y) e5 g! U
}
6 ?( y& g8 A4 J2 n
4 Y5 ^+ e6 T9 x; |/ t
socket.onclose = function(){
) u1 E8 e9 O: X. v9 F( _4 w7 t
//关闭WebSocket
4 E- d& i! D3 j; o# r K" S1 _
}8 P- h7 O. L5 _5 D) I8 W: b' v% Q
# p5 }4 a4 |! D5 c& J, p/ J# _
socket.onerror = function(){: O0 a) `9 b/ S6 N# w' l
//错误触发
{2 {4 _- `4 z+ o; M: V
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
5 r1 p9 w+ S- g- I. K4 l% U; V
<head>
, h, \: Z) T2 q# _' j& y+ s
<meta charset="UTF-8">8 g) x7 c- X6 X1 n/ r) _* t
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">8 t+ }& v7 V) G7 h. m5 ~- T
<title>WebSocket</title>
) K& o$ k& E7 o* R5 j! o
</head>! A2 m# }! b/ B7 ?$ U( J+ X
<body>, j! I7 ?; _6 e( o4 l( y1 @
</body>
. V# V5 h8 k# e8 k
<script>: t2 i1 U& r2 v" I5 p
var socket;
6 H9 ?% T+ d* |+ E, k# f
if (window.WebSocket) {
7 x2 H, b- Z2 Q# P5 U
socket = new WebSocket("ws://localhost:8080/myapp");
socket.onmessage = function(event) {) a9 d8 w$ B, J) D7 z+ w& v: L
alert("Received data from websocket: " + event.data);5 x7 j. h6 y8 V3 O$ _' k
}
* n# q( ?7 q7 `$ H. m8 ]9 I: x+ L/ E
socket.onopen = function(event) {- H6 \( o* W2 a1 c. v
alert("Web Socket opened!");( e" K4 n% F. f# o( v( h d
};
! E5 w! {1 q$ \4 N0 y" U
socket.onclose = function(event) {2 m5 E" J! D1 W' V2 t
alert("Web Socket closed.");
4 d6 I3 }3 \+ B; E/ g# B% @2 @ C
};$ M, e. V6 ` U1 E6 D& r, q% r
} else {
4 y# z) x! n0 I
alert("Your browser does not support Websockets. (Use Chrome)");
+ `& x: L* j2 [9 d( `, J! T6 j- ]
}
2 b9 `- h6 F( k
8 l8 v1 _6 M' a! V
function send(message) {
$ y8 D3 \* g' Y
if (!window.WebSocket) {
9 N G, o& }1 B7 I0 X- s" h# B
return;
3 ~6 |, N' @% w' J; v. W z
}
! F* _' o! K9 D g7 r/ `# J
if (socket.readyState == WebSocket.OPEN) {0 F3 I% ~0 W. S# [! M
socket.send(message);
/ L# ^% `; R8 w1 h: S* y
} else {
2 Q" a! n1 N% k
alert("The socket is not open.");+ }4 D2 N3 q+ O' o1 u3 `
}
+ E7 R! \/ B" A% V
}8 [6 Q! p$ C: P& ~1 X# x4 c& y1 @4 @$ Y
</script>
) b2 W- U% s: c% U
</html>

复制代码

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

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