浏览器使用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:// 前缀。
% Z& H% ^( w s' B, F! r( u2 D. m. D
, g5 k* e8 \" u
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
* Z1 L0 { Z% o5 ~! I! n
}& h ~: T9 h: j1 M d# o e% V: K" i8 K
; j! F- F# h! E; e6 [4 V
socket.onmessage = function(){
7 B+ d7 b' i& B/ a9 j
//在event.data消息数据
3 d. N8 B$ \6 B' h- O2 i
}
) c8 B! O- Q3 O6 u% j8 F
1 S) t; Y b7 b
socket.onclose = function(){! Q6 i( \; h0 `& H- l0 a! L H
//关闭WebSocket5 A9 Y- B n/ m+ T3 x# L! b9 J7 C
}
5 W5 |$ j* l2 ~8 G
; B( p& r6 k: ^5 z3 B3 J4 }
socket.onerror = function(){# J& R _- ]! ]' g6 `. z" e
//错误触发7 m4 w7 D3 \1 e" `3 i
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
% Q( T' g( \6 D2 M! B
<head>, O& q* }8 c( F4 }
<meta charset="UTF-8">
& H; r& K3 @8 u$ p% P9 w
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">; h+ h; U _( u6 ~7 k/ F+ }, K
<title>WebSocket</title>
: _, J" T% x( W1 n; |
</head>! O5 E" ^" S+ v
<body>
% t, F/ C; n. J1 f+ k
</body>
' [9 |8 g8 o7 G1 u9 q
<script>
K/ e6 I1 U, ~
var socket;4 U, O+ R5 E6 m4 }3 a- Q9 s
if (window.WebSocket) {5 f* @) X6 J& ?
socket = new WebSocket("ws://localhost:8080/myapp");& G; k% ~5 j/ {; R) b0 c
socket.onmessage = function(event) {
; O/ V1 \+ f6 @0 g! A$ a. }
alert("Received data from websocket: " + event.data);$ F! [, {% v) H0 F* U; w- [
}
) m5 w& T) F# L6 E4 Y
socket.onopen = function(event) {# t2 q; d7 J" @7 J# z
alert("Web Socket opened!");# ` ?) I- u* W) V& g3 ~. k; m
};* w# [0 }) ]+ d8 I: \. v: j
socket.onclose = function(event) {) W- W- P; F& o+ }
alert("Web Socket closed.");, x! m# y: D' ?% I/ E
};
1 N& A2 i/ P+ m; `
} else {
6 D5 w' i' p' Y5 z& q. x
alert("Your browser does not support Websockets. (Use Chrome)");0 h0 E4 k* X1 L! b1 E* m$ \+ ^
}
2 n! @* [; I$ p
6 ?0 n# b* a' [$ `/ C- @2 s0 _: s7 ]
function send(message) {
0 K5 Q- O% p c7 X
if (!window.WebSocket) {
2 ] r2 M4 s/ Y, w9 s
return;
8 r" a' D# {+ X7 D4 U& ?
}6 C2 s3 ?# q. f- ?9 _% ~6 E! r
if (socket.readyState == WebSocket.OPEN) {! I% I6 E- e0 k4 e) P# q6 z
socket.send(message);
/ S! c1 B+ X; ]
} else {& a0 y: G* ?5 ?" M1 U9 T
alert("The socket is not open.");
2 d! H: ^; d$ p) x! j4 ^
}
0 D3 \9 G. W4 ~: g1 C6 V1 {1 v5 k, h( l
}
% O m/ @" v7 z( d8 G
</script>, W5 Z0 K6 U- P) s9 |
</html>

复制代码

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

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