浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

/ H) i( }4 w& _; m
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
. _8 V. Q& $ L# ]
: B9 z& m: e% {# S* b4 l% T& {, $ m- f7 h" v
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
3 A; q1 t0 [' B) E* d: i1 Q
* s7 t' l8 |7 O- o+ C2 {, q7 ~. q
//打开; R9 ]! L+ Z9 C6 t. a
" I: Q; A6 N) v' B+ D) w" g
}& I) ]5 b" w: }4 h
3 S$ \# c$ Z4 N2 |
9 T# F: N2 r) W: s0 w( e
socket.onmessage = function(){
" U# Z9 N! b! e( c
: s6 a4 E P! q) v; M
//在event.data消息数据+ i3 {6 F2 {' f+ \$ g/ \3 D- S
- C$ \; `- G- X7 b2 x( F9 {
}$ _% E4 I7 Z0 ]8 a$ R& _4 B
& W+ _) j3 `$ F) L9 l9 W
socket.onclose = function(){0 R+ u9 o/ D C5 C: |) ~
: a9 Q( \( j0 \* B( F/ ~! C6 D) M5 k
//关闭WebSocket/ k' B* c1 E: s7 Q7 B
9 J2 J! P* F5 X7 Q
}* p! S$ J: m6 b8 S5 G) H$ m
6 E0 p* C! }/ ]" d1 I
socket.onerror = function(){
7 k# c/ C2 V( n5 d
0 |# ?1 ^( G4 L: H+ _! b
//错误触发6 y+ d8 c1 i- U& |# \
& |. v" T: I6 _' v( S6 x: I
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>6 s6 a5 p. ], J. G7 e+ c6 |3 n+ \
<html>, S" ^9 k1 I( q( w4 d" w9 G4 V$ V3 i
9 C3 N- ^: y! E6 C! l3 G, `, M
<head>; n8 P0 b+ J' X O
<meta charset="UTF-8">
$ B; u6 [% `+ K" K; X! g. F
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">" n# X& x( x |, B5 j4 }
<title>WebSocket</title>
6 d, d8 `% y! @! Q0 s
</head>
( Y3 c% ?$ e0 k6 d0 T5 v7 P6 T
' S7 w& {, P/ P9 f" S
<body>
! N- j# u2 R' H% z
</body>
$ m) H) a; a% s
<script>
* y3 S- Z: r, C" i' B; L" V
var socket;4 L! g( Z# Z5 X" I/ h& x
if (window.WebSocket) {
4 P# M4 T/ X, Y, m; N2 z6 Z
socket = new WebSocket("ws://localhost:8080/myapp");
- y5 ^) V2 K4 C
socket.onmessage = function(event) {. V2 V. P9 t& I1 n' S9 S, e5 k0 n
alert("Received data from websocket: " + event.data);. f5 b5 B" g, L9 S: a
} H$ v* p J4 H
socket.onopen = function(event) {2 y" D7 K! }3 c9 g1 v
alert("Web Socket opened!");
/ ^/ j. @4 v1 ?; v. g/ e% _
};: |3 h* |6 F1 }& m1 ^6 F& a
socket.onclose = function(event) {
( B/ g2 M( w% d" r e/ O$ `" n
alert("Web Socket closed.");
/ Q; v9 J" u5 b2 X8 W2 `4 P
};5 V9 k8 v) |( i0 \
} else {* N+ R1 t1 P {4 E
alert("Your browser does not support Websockets. (Use Chrome)");
3 n8 r) u4 X% o6 V+ q1 j4 I* Q
}
6 V! z0 _: @8 Y
# C2 w5 u3 s7 v2 l) }( p
function send(message) {8 `$ ]! L; K& ~' r- c/ X! U
if (!window.WebSocket) {
. k5 p1 ^. |, V% @& x: p9 j
return; a2 q0 o1 W, ?8 G. f
}/ p2 G- z# [! W+ H% j
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
- Z& l/ v7 A1 F6 c9 k6 @! }4 O
} else {5 `- u+ ]$ | K: N2 H
alert("The socket is not open.");! Y6 ~ f5 S" {- \' h* M; G3 ~
}4 `: w# B5 ^& C. j7 X; p
}6 t+ u2 k$ q7 E: ?0 u' Z5 G
</script>
/ Y8 S: v# o0 I- v
' q' e2 B3 E. o, H! E" ~6 x
</html>

复制代码

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

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

浏览过的版块