浏览器使用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:// 前缀。
: W" u( ?$ u+ ~- o6 Z/ f0 a0 n1 k4 _# ?# ~

3 s4 G V/ z4 q; D" P4 m# _9 v该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
( f1 v7 f. P8 j2 f5 ]6 @' @
}
' d& F: z4 |9 d' Z) h
1 \5 a' x7 t( n, M2 O( z8 m
socket.onmessage = function(){
2 U% c- O9 y* u* c8 ]1 G. ~
//在event.data消息数据
) |+ y8 z f# O6 R- C/ U' j6 \
}2 t) l! f5 Q% ?; d' {+ Q0 p
3 z$ R3 F# m; x$ E6 [0 A: w
socket.onclose = function(){
; D, o( V1 s5 L# t+ o" n
//关闭WebSocket' e" C a9 B1 M4 p6 M+ m2 j' [
}
}9 f. V& N0 T. ~
' ~' U8 Q% E3 r
socket.onerror = function(){/ \: H* H# k. x e: Z; c7 d
//错误触发" b' T! B7 D$ a& I2 }* c4 l( ?
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
- ~) w T9 M+ V) W3 q& P5 R6 w! Y
<head>9 p# n& l1 @% D1 C- y0 D0 D
<meta charset="UTF-8">! i7 ^7 Q* v8 q) q) k- \9 w* n9 z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
" d3 G3 }. z. w' d& S( C3 C
<title>WebSocket</title>0 r7 k/ s( O; S$ ]( \ N3 U
</head>
$ m1 ?! I# K5 Z
<body>
1 \7 {, T7 w/ `
</body>
2 e+ P) z5 N) J" ?9 L1 b
<script>! `7 P1 P! o, _7 Z- v
var socket;( J, }9 z% ?! Y( ^7 [+ l$ q
if (window.WebSocket) {
% f: V; c [ g0 P
socket = new WebSocket("ws://localhost:8080/myapp");
% x }- p+ ^& x1 }% S$ w
socket.onmessage = function(event) {# S/ W$ e8 J8 }, r; T
alert("Received data from websocket: " + event.data);) [/ M& B/ x L0 J; w4 f4 k
} [. k4 {# D5 N# W1 h8 M8 E
socket.onopen = function(event) {
, N: E2 e( I0 Q" q3 i% a
alert("Web Socket opened!");5 b' V) T' z. B; q, r
};+ Y! D, p) a. P1 X4 B
socket.onclose = function(event) {
. Q P8 f' P4 B' g
alert("Web Socket closed.");
: V7 G* T a! g' ]2 N% b
};
" _, o4 P9 r* V! D1 ~
} else {+ S5 _$ r/ r; Q
alert("Your browser does not support Websockets. (Use Chrome)");
. W% |, ]3 l$ l3 i
}
8 Y9 t8 c1 s, d8 g1 R
+ U$ [ s4 v( T9 n! h7 y
function send(message) {
& X! e% a P- w2 n7 ^/ E
if (!window.WebSocket) {
' b e2 \, y9 Y8 B4 A
return;
) f/ N: E# o) p l! r
}7 w6 W+ V6 {+ B/ \
if (socket.readyState == WebSocket.OPEN) {, O1 M8 S! Z, m4 c
socket.send(message);$ N# A- H" c5 f- ?2 G. N& X
} else {* x# O0 _; y* D7 c$ S4 M: K
alert("The socket is not open.");
! q7 |" K$ w" W7 m& ^+ E# Z
}6 _! j# s4 o; i% _# I H0 j u
}
# q4 j8 ?/ {' N& E, l! X2 z
</script>! }! j, p0 c/ m! A$ U/ W+ t
</html>

复制代码

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

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