浏览器使用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:// 前缀。
9 u* a8 l, W) [$ |. w5 `# k2 D
$ S, y# l& H* t4 f
N9 D; K6 g+ }0 e4 X该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
# }: ?! ~$ H4 y* j- ^6 N
}3 s1 B% {) y: p b e$ s- B8 I
6 v' A& i9 w8 G0 T
socket.onmessage = function(){' U5 R0 k* |" J3 }7 S
//在event.data消息数据2 A9 I- l7 D+ @8 q. Y" I
}7 E! b* D2 F0 ?
# j) j$ i2 s S1 a
socket.onclose = function(){& P9 `: X7 S# t
//关闭WebSocket/ @/ l& c, M: k6 P# O4 A3 L
}
8 _* ~1 e% |. p4 T& C5 O
: G& H; Y# |) Z+ F! T: L6 c- }
socket.onerror = function(){
( ^' n- P6 D" d! y9 D5 V
//错误触发* R$ W) K9 u, l7 i: ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>& O( d N \3 \
<head>
' W0 o* @: j2 r1 b9 n8 u
<meta charset="UTF-8">
' W* z( S6 F+ B& s
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">9 k9 h; g: x/ @ P1 \$ q/ l% k# m
<title>WebSocket</title>) z, z" N' y9 I$ n6 J# G
</head>. X. s. a8 D7 j2 {
<body>) d6 @; H2 ~# V3 j9 j
</body>
, v. y6 `6 _2 t3 y2 Q. c
<script>
8 \% _# L1 e9 S/ `! H, g0 m% C
var socket;- {! q0 K1 r* u. u6 P2 e8 u
if (window.WebSocket) {
, }4 N( c3 N% I0 h+ o
socket = new WebSocket("ws://localhost:8080/myapp");3 P1 A9 X/ o2 {, C! M; i" v0 `7 A9 i* y
socket.onmessage = function(event) {
0 m `: Q' s+ F' X3 y' V0 F
alert("Received data from websocket: " + event.data);0 o: Z# Y% w1 J+ z
}
5 Y) f! p9 w: {" ^# `) f" R
socket.onopen = function(event) {
9 J6 g+ i/ ~+ B" }
alert("Web Socket opened!");+ s$ [, D" {6 d* \7 H; f
};
0 ]& M/ M& d3 N$ T9 {6 ]
socket.onclose = function(event) {
4 |) n( A v+ v0 t
alert("Web Socket closed.");
" U8 I( [: z5 {$ h. @4 h$ _
};) H( U% s9 O1 Y8 @5 p( u4 q9 H
} else {* D7 N* _+ Z3 g* J, F6 l
alert("Your browser does not support Websockets. (Use Chrome)");: D0 ~- Z$ I5 v" D
}% ?) O: H8 R |) T
2 z( G/ N% T+ z. Y3 h- K
function send(message) {3 D9 l3 {0 {, O3 R4 Q3 v/ z
if (!window.WebSocket) {
+ ?- ?% \, Q4 J3 M$ P
return;2 M% k/ Z$ A3 n+ L
}+ d( ~3 |! G- k+ l' k" P: V
if (socket.readyState == WebSocket.OPEN) {
% l- \3 g7 z- U& i% M( ~
socket.send(message);+ F) Y3 z; V J+ K2 F5 U
} else {2 }3 U8 A) K- ?
alert("The socket is not open.");
2 G% U p% J- p* l- E& Y" R- O
}( G0 W) Q2 I5 V& A% o
}+ o+ i- e0 c6 K( ^6 e2 }
</script>. R: s# S( j$ K: _
</html>

复制代码

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

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