浏览器使用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:// 前缀。 / u2 P! n0 q& W, u
+ q7 B+ I5 M- h5 k
1 \% @; d$ v: b1 U
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开) z+ ~) M5 r) d- V n& `, J* n
}
& {5 T. [2 S ~) V; h2 C
6 I5 @3 X F J% l( e. \3 Z& q
socket.onmessage = function(){
! y) P3 f& [7 D2 F5 R, T2 n
//在event.data消息数据+ [) Z# a1 k( b" O$ w+ ` J' r
}& ^( T$ Z3 @4 N3 U" Y: U' H
1 n ?. I+ T% G2 P+ T
socket.onclose = function(){0 T7 C: K1 n; h- N# {; g$ h' @
//关闭WebSocket) k. q$ ^- L0 @
}
W- }2 A. n) @0 f+ Y" Z" e. J
# }& r2 t+ t! V' f
socket.onerror = function(){* _, B( a5 L. C" m& [) F0 T" v
//错误触发
% U7 ?' ^1 T1 e" \0 }
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
4 `7 y; K2 f7 c, u$ L
<head>
) _5 z( b9 _% L& h; e R
<meta charset="UTF-8">* I: n: w" D& U( \$ \% N3 O
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
6 H' n- h* y$ s h M& T) N
<title>WebSocket</title>
6 j' V* P: P V+ }7 {* f
</head>
$ r6 d& w3 ?( [" G) z Z4 }# {
<body>
4 G7 }, c- V" t
</body>
7 r$ A+ Y v% C4 x5 G) o
<script>
! E) h4 p7 M4 u" a3 m0 N
var socket;
; Y4 H$ ^- Z% L0 f# S; H
if (window.WebSocket) {* f) S3 |; X3 p- l" q \4 R4 M4 F; X6 {' ?
socket = new WebSocket("ws://localhost:8080/myapp");
: e1 V% X E( E! g8 l
socket.onmessage = function(event) {
4 n; ~) b% ]8 I
alert("Received data from websocket: " + event.data);
3 D; N( H8 m( ~, c5 y C
}
- G& m0 F6 F- s! q0 P
socket.onopen = function(event) {, g' o( a7 R- ?" _ T3 Y, ^2 X
alert("Web Socket opened!");+ y& ? r6 t: H. s! D B; z9 B9 |
};2 M" a8 _* z4 o- Q. |) f; N0 q( ~
socket.onclose = function(event) {: @) P% X0 Z/ h2 L$ z, D
alert("Web Socket closed.");
1 O) {% o% G; J r; s( S- ^. v
};4 T% Y8 q. j5 N% L
} else {' |3 M2 v" v4 b) l( E: ]9 U
alert("Your browser does not support Websockets. (Use Chrome)");3 G# Z% A2 U9 ^9 [' s, F7 l& V
}2 _5 E4 ^. v" O2 {5 `, M
3 t: ?6 Y( @: b' T% o9 I. |9 D. z; R8 P
function send(message) {
4 P: j* W& l! A3 Q, j- P3 Y
if (!window.WebSocket) {/ o% \' y# K3 k; c6 A4 y' T
return;
: z1 Y0 u5 D% d) R, f9 O
}
4 ^. }$ U% U+ N7 F" m4 A$ [5 f* c5 v
if (socket.readyState == WebSocket.OPEN) {( V+ b, W, _% D+ }
socket.send(message);; E2 G& ? F; A6 D: E3 W2 q
} else {
+ p* D# {! s; N
alert("The socket is not open.");: I2 c: A0 Y1 b( @2 S; F
}
: m3 E8 b+ @' }/ `$ N' l1 v
}* r4 w) D# P" Z& v& ]( r
</script>1 M& T; e9 ]5 V
</html>

复制代码

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

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

浏览过的版块