浏览器使用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 D3 v; o) Z! Q3 s
- h; X; J- ] }9 y+ P9 m
) E: j4 P9 }. k3 O' k
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开! D: H+ Q# y& d5 r. R
}$ W. Q9 y7 h; U6 n
3 [3 v; z7 i+ H" ]5 i
socket.onmessage = function(){
7 e. ?0 h" Q( z9 y
//在event.data消息数据
. s, I: t4 x8 _9 O
}
+ i# u; E2 f! V& R1 L
$ r3 r L) I/ S9 a% E# Y5 [" H
socket.onclose = function(){
# D" j9 Y, c0 h7 Z
//关闭WebSocket
$ ^+ w% o) M8 ^8 U5 w1 i' n' t# r
}, D1 j) f# p6 ?3 F4 a$ W
% G# [: E5 g8 o. Y ~9 }0 u
socket.onerror = function(){( @. s, k- C; W/ f: U' r' @
//错误触发0 t' t# w/ m; _. s8 Z& [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
$ i/ {. s( l- `* H' e
<head>
' @, f! K; n# L# l0 j1 I
<meta charset="UTF-8">
- T: A5 N" E, T# o
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">3 p* v9 V+ y }2 D2 j, U
<title>WebSocket</title>0 b. h: d% b! k
</head>
1 l% ~# ^2 X8 z
<body>7 `5 Y+ Z* k* n% h2 s: h9 a
</body>
/ p0 k& C. S; i3 v7 e( s
<script> f$ \" V2 \4 F% B
var socket;
0 H: b* S4 d2 w8 Q
if (window.WebSocket) {
% |! j8 k9 t5 q R$ r l
socket = new WebSocket("ws://localhost:8080/myapp");
6 p% C2 @" L" }& W
socket.onmessage = function(event) {! V4 |2 P" U4 [* [3 W3 J
alert("Received data from websocket: " + event.data);
3 H; C$ m8 L/ M) B* r
}# b, ]' _! }2 B M
socket.onopen = function(event) {
5 t, t9 Z/ b7 m8 P3 K
alert("Web Socket opened!");6 C6 I I2 m; s% Q- ]3 H
};
" H% n! U0 ]* J- }' U {
socket.onclose = function(event) {& K/ F6 T; [- r# \- n
alert("Web Socket closed.");& Z) v/ x( a/ n9 ]9 Z. Y4 |
};
5 C8 E- M) N# M# X2 ?0 W" u
} else {
) F6 Z5 f3 [6 o- }1 h* C( S. J) E) }
alert("Your browser does not support Websockets. (Use Chrome)");4 r! ]# ^: E7 B
}
* L; L; M2 q6 ^4 Y9 V
/ {# U7 V1 V* C% W% x3 D/ j( y2 Z
function send(message) {) T9 t. I+ E/ q& ]# O
if (!window.WebSocket) {
8 A6 O$ \" B* f' y
return;
, [8 D# i ]8 |! S, t; Q: H
}
1 p( ]& O: O% d" @" f
if (socket.readyState == WebSocket.OPEN) {
; ^- w: \5 o6 J
socket.send(message);
/ P/ {2 v+ G0 ^* i$ j3 ]
} else {4 a2 b6 z+ }: G+ H' V5 b' \
alert("The socket is not open.");
) q/ X% H. v ~4 x p* x! Z
}0 a" \2 q5 s- z6 n- P" m
}- _4 ~8 f5 u. n0 {- k: @
</script>
! l: @1 x( M K
</html>

复制代码

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

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

浏览过的版块