浏览器使用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:// 前缀。 8 x7 k% K/ ?8 ^8 f
, X/ n6 T5 p7 V! S3 s6 i

% L% g3 e" |, y9 l该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开 y3 N! n3 I# n/ [
}
0 l8 B1 X) t4 k w( w W4 V D
$ b% F1 T. o0 F7 P
socket.onmessage = function(){& e- |5 S" @0 a% F4 ^% ^" g, Y
//在event.data消息数据3 ^* ~0 e7 v( I' p. T
}! u( ?9 q, r/ I# t. W& H q
# U g; k* W* E! r( e% o
socket.onclose = function(){
* f. H$ J9 R$ H; A8 W7 |. [
//关闭WebSocket$ \2 E; A" h* Y% ]7 a1 O4 |
}* R) V+ F& C1 d \
- D/ v. d. d8 j8 ~7 M8 O$ c
socket.onerror = function(){' E) C, r' X3 E
//错误触发0 ?3 L+ P1 m1 K
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
9 _+ F( v6 H! P( t4 U/ P6 m) y4 e- R
<head>
# ?! ^; X5 q1 \! b. @2 k- |
<meta charset="UTF-8">
, H1 q {5 |! U# j
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">( G9 E" n! E6 N* b% |" d
<title>WebSocket</title>) j5 `6 N: [' \7 ~% E
</head>+ N! _* a3 M# [: Y0 P0 G7 ^
<body>
( y5 F5 m8 ^8 U" y3 |5 D3 j
</body>4 g5 p( R8 r1 R* v; K% r5 }
<script>+ H i2 w( U8 R
var socket;
8 G( p1 o$ u5 A# q% r+ N& l/ e: V
if (window.WebSocket) {. K3 b# I* c7 o
socket = new WebSocket("ws://localhost:8080/myapp");# m) ?: w3 B" V, \- ?
socket.onmessage = function(event) {
; N" Z7 v, M+ a! k; k9 v* L* {
alert("Received data from websocket: " + event.data);
! F" c8 _5 l, s4 G; p% W
}
( y, b+ r, H9 s3 n5 f
socket.onopen = function(event) {8 o+ I# C# C' H) V' y
alert("Web Socket opened!");, q5 J8 a/ H: \/ b
};8 M" {* G/ R2 g. Z( }3 F
socket.onclose = function(event) {
6 C8 t) L& [2 C
alert("Web Socket closed.");1 \3 B9 n5 W( q) X3 p5 a! Y* D1 V
};
' o' q- d( m p% Y
} else {* X3 @# [+ l% X
alert("Your browser does not support Websockets. (Use Chrome)");
) m* ?; q$ _8 Y5 x% j3 [: r) }0 i
}! b' N" o2 h/ I- K
E7 g! _+ C {, j2 S5 |% l
function send(message) {5 f8 N) Q1 Z0 U. p2 K: n. H$ Q
if (!window.WebSocket) {! x7 @" [6 o( J, u% B( E
return;% b$ X; q K& ~
}
2 j- i; U2 o6 _! v1 O+ x/ H8 a
if (socket.readyState == WebSocket.OPEN) {
/ T" ?( _1 |# L! `' y9 Z7 o
socket.send(message);6 h/ j9 |/ }/ O2 B) v( M
} else {
, @7 A# g# j: v8 l. {3 k, x Y! a* C
alert("The socket is not open.");
7 \" n0 r+ p; C3 `4 Q! N' l4 u$ Q$ |
}
0 R) z( P1 N; S5 Y4 k
}' `5 X9 r! c6 v; y+ {9 r( ^9 A
</script>' H! }" _, g+ `& T R l
</html>

复制代码

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

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

浏览过的版块