浏览器使用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:// 前缀。
# J6 g; Z3 H2 n' t
/ J' R7 s9 ~7 C, W7 c, X& a
9 x3 s9 [$ P8 ?5 A( o该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开4 M& i! q* f; |0 u
}
\. T6 k; J1 m& w& E/ D6 O1 w7 @
" D& I1 X- x4 R( D& ]6 T
socket.onmessage = function(){, k. N4 e# M* F# X2 q
//在event.data消息数据- ^, C' U( E: m$ |" O
}4 u7 F) w6 H3 E4 z, {2 ?
! u9 W$ Y8 T7 K7 H) X: U
socket.onclose = function(){% r5 ]7 x5 D- a6 K% @* I7 n" `
//关闭WebSocket
7 T, z% p' C- O* O8 C7 y: }
}% n2 S2 _1 P4 p! B6 _
# a) Z9 ?) } b: z! j1 o2 _
socket.onerror = function(){
' Z% [& [1 B4 a6 X
//错误触发$ N5 B) l, n/ q7 B& Z! V S
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>% _" ~% d8 w a% M6 l
<head>
<meta charset="UTF-8">
; K4 T/ i, e0 N9 ~3 Y: @
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">3 U2 M+ u' v# j n, S) ?. H
<title>WebSocket</title>
1 Z" s+ I* ^9 R& ^% |! y: }: O
</head>
6 ?" _$ q% z4 ?7 r1 e
<body>
/ M+ ~' |# j% O o- Q& x# t
</body>" U% S# b3 t4 J5 ]
<script>5 {- {. j4 t' ?9 G: \
var socket;
; |' W9 y) s4 k9 O$ ~* Y+ u/ x
if (window.WebSocket) {
# s1 Y1 w( r& R' i; ~) \, t6 j! l
socket = new WebSocket("ws://localhost:8080/myapp");+ i, K0 Y/ H/ F2 r6 B- y5 x
socket.onmessage = function(event) {2 B4 ]; B/ e. M( }
alert("Received data from websocket: " + event.data);
) ^* i% v- h8 {8 R
}
9 `8 }4 z' z* i( n! `/ m; ?
socket.onopen = function(event) {
% D% n; F0 ]$ n, }6 U1 ~6 @
alert("Web Socket opened!");
/ g: U3 G+ |7 Z! g9 }! y+ [4 `
}; o$ t0 N- J) ^! X0 I6 W
socket.onclose = function(event) {
( H2 r) A2 e ?' S+ x' a
alert("Web Socket closed.");
! p2 Q8 L* o& h; I8 p( }! C D. N
};
8 U$ |5 \( p% }* p' S2 F3 B; w
} else {
, S; {$ a: t4 U
alert("Your browser does not support Websockets. (Use Chrome)");
]3 D8 b% \( Z: S* U( C
}
% o" B4 i" Y4 L/ D2 A5 E' S$ _) u
% O1 C1 e4 v/ G2 W4 t5 f
function send(message) {
: `& H; `, Y; }+ O( F, M
if (!window.WebSocket) {2 N- T3 m4 [3 q) w' C
return;# D: T- S; x1 V, H/ \' [8 v
}
8 R" q1 C4 g) q+ L
if (socket.readyState == WebSocket.OPEN) {. s# D* K) K1 N* Q( |8 `
socket.send(message);$ x! f: i' S5 x3 m; ]' z+ L
} else {8 k# v2 p! \+ ~7 T! n6 I
alert("The socket is not open.");# c) }3 Z4 s# y4 a1 J
}
% e. T' x; q7 K4 H) e
}0 D, R' C$ z8 i! l% m) m6 r% d
</script>7 I+ P1 `" B& }
</html>

复制代码

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

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