浏览器使用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:// 前缀。 # W3 U- ~* J8 N; ^- R- e* W8 E6 K& G

% L! n* l5 R4 S. P
8 j8 | G( S# ~: L% }0 D# f该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开' j# n, O& R+ H1 t% K$ c
}
! I( I' D. H- \) [! t8 D
7 |" n- t( W3 n$ c6 P3 y
socket.onmessage = function(){
//在event.data消息数据
6 v8 a5 h( `8 y$ M# b
}
6 `: b0 P& A6 N* c. Y0 b+ W
. W1 k z; U' A0 U% z
socket.onclose = function(){
5 Q. B8 Q/ B: U
//关闭WebSocket- o% a7 V. k9 m+ u! r2 Y
}
! j4 m+ R" c* {; L6 u9 x
' e; [3 h4 e- A$ B) p3 e
socket.onerror = function(){/ D* Z6 k3 W6 @7 a, z5 {
//错误触发
( ~9 R/ L- U2 ~# y4 Z2 _
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>2 k1 r& Q5 }* ^' m w: ~* d
<head>
7 ~8 |% f3 m3 X1 @% F& U- ~9 H. {
<meta charset="UTF-8">/ Z- d: |9 G/ z/ ?& m- R* Q
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">: {4 n1 G5 @5 `
<title>WebSocket</title>5 I0 W2 E* F8 p# v
</head>. j3 r# Z# a/ Y6 E% a! ]
<body>4 J7 A) z4 w' p/ z7 B
</body>
1 Z7 ]+ T8 }# Z$ k# ?% N
<script>
0 g1 X( f: z* r9 E e* D- U
var socket;+ s3 Y$ L) w. D2 z; }
if (window.WebSocket) {) F4 o6 s; w/ y. Z1 L3 J3 Q
socket = new WebSocket("ws://localhost:8080/myapp");1 w7 W0 S" p! e& O
socket.onmessage = function(event) {# L h7 U7 V) }
alert("Received data from websocket: " + event.data);! J" O& u0 ~+ N* K- r& J* k
}
7 P' }8 ?+ W# {( r
socket.onopen = function(event) {
* I& \9 g4 D7 S% P) t% K
alert("Web Socket opened!");; h8 r( P% J6 W
};
B( O7 h& R0 m2 G
socket.onclose = function(event) {6 \ w+ r1 [* z- t
alert("Web Socket closed.");# p7 X8 H/ v F: T9 Q5 ^) A
};
0 _* t( x2 E8 T4 x5 u6 Q. _
} else {. X& R/ r, E: t
alert("Your browser does not support Websockets. (Use Chrome)");& h# G$ |( U) d
}
/ F( Y( U* x- ]/ x
function send(message) {
. {8 e) U1 X9 o, E
if (!window.WebSocket) {& u- f% z7 e; ~( W* g, D+ T
return;
" `. i( A7 U7 b4 N, S i
}, c ?$ \; c# C* {0 e* @2 h
if (socket.readyState == WebSocket.OPEN) {; T2 h% |4 h" u3 D. `8 A
socket.send(message);! i6 X/ t& z1 g, m W L
} else {
6 e0 V' i' D q. W) P
alert("The socket is not open.");
+ v! J" F8 B" Y6 F
}
& Q/ I6 Y% \+ a
} {# o; A: d" _/ L2 S% S2 C
</script>
- R: W) R* n9 d6 F* }) E+ b+ p5 d
</html>

复制代码

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

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

浏览过的版块