浏览器使用WebSocket实时通讯

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

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

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

复制代码

0 t. e, u# Y4 Y* Y, e9 @2 L与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
+ s' C7 H* m w3 y# [& ^* F7 |3 ?6 N3 z3 I, \1 h/ e
# e( K- c. y6 N/ }* }4 ~, @
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){/ e! d) r/ n& u! ^+ i: J8 v" u1 J
# X2 B4 o3 j- L1 ^
//打开
( j% u( `) C5 s/ C0 P
" w6 b5 w' B+ m% f; W# J% V
}9 x+ I7 `( t2 X* S" A
" n" Y1 ]' e3 A- A
% M/ t; l4 ~1 U, C, r
socket.onmessage = function(){
/ m7 K8 j/ \5 s" ~( j- f
# ]- W5 y2 T8 i7 A# z! i% Z+ L
//在event.data消息数据
3 F, j# x+ ?( V$ o" I' i
; u+ J _" {$ S2 ?1 W
}
0 T% I( h8 v) I
7 ^4 n4 |9 F t' ~6 t& w
socket.onclose = function(){
8 q8 G8 j/ K8 V! a
" G7 |& i% u, G( P9 v6 R5 {3 C h
//关闭WebSocket1 A6 h% q8 j! a/ V+ I
) l6 R( {. c% m5 u4 l( Q
}
! ~- `6 ]; e4 |, t# D7 {
, \# q/ I1 Z- X
socket.onerror = function(){+ O [( L6 \ ?
9 z/ ^, W5 m0 F
//错误触发5 d6 ]% ?0 T0 w4 ] D. r
2 U9 q. i1 m- E' M. T \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>' J+ V( ~, h* y
<html>* ^- \1 P- a. s3 c Z& ]" ~
( Y- b( L( W7 P
<head> h' b# e6 L3 t7 N6 l, o
<meta charset="UTF-8">$ ^+ i1 j, G- }/ F# T
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
( Q6 T/ d1 S5 T4 n* G6 ^: h, a
<title>WebSocket</title>
; T* r7 g% A7 `+ j4 ^/ _
</head>
1 h9 x" [" J; o! y; ]% t
; b9 ]; T% } s
<body>
* l2 C: Y$ x- d
</body>% ~/ X: \8 q$ t9 l( f- A( q4 o: U2 W
<script>( ~, @& H! R* d- z# v" f- g, v. w8 t
var socket;
$ _6 P8 j) d( A, |* u
if (window.WebSocket) {, | y2 M) C( g3 R) Q
socket = new WebSocket("ws://localhost:8080/myapp");, R/ ]+ N( S2 s
socket.onmessage = function(event) {
, Z i8 e$ d/ r2 q
alert("Received data from websocket: " + event.data);* V$ x+ s( O, m! k0 s n
}4 X' `9 V$ V! Y7 A) I
socket.onopen = function(event) {" D: N1 i3 T! C% S
alert("Web Socket opened!");) B. B* I" W3 s/ n7 F) f8 `
};
! C) t7 T4 C5 c* n
socket.onclose = function(event) {
# l# v7 C8 u/ i6 R2 [' H
alert("Web Socket closed.");
5 O5 |' h' n6 C! q1 F
};
& n n& {( L" X+ y# \
} else {$ K7 }- x7 r8 t/ Y. ^3 |
alert("Your browser does not support Websockets. (Use Chrome)");- _+ Z1 {) x- E/ R
}" S6 z3 c9 A5 t5 D v
% T& d6 A$ ~/ v$ ~0 [4 ?* t3 z. v9 ~
function send(message) {
s( R) O3 z( {+ d% L4 Y% j
if (!window.WebSocket) { F7 e0 s2 g$ P7 z: g$ R
return;
4 p! B" m* N0 o3 G7 `
}9 {& F e c9 J
if (socket.readyState == WebSocket.OPEN) {
. i1 I5 t: A* M+ a/ }
socket.send(message);/ d% h% c, J" T# d1 H
} else {# F& s4 e+ `; ~ a8 H# P( l
alert("The socket is not open.");
- ~. H! v2 S% ]) W& [3 a3 E
}
5 @) o8 m% F/ [( ]5 r; }5 b9 j
}0 T; y6 Y( `9 l4 e8 ~
</script>4 f0 }7 B/ E! y! `7 p$ f
& Y6 c3 h( E2 ~& ^3 B+ y
</html>

复制代码

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

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