浏览器使用WebSocket实时通讯

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

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

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

复制代码

+ P4 e6 X `$ Q7 y, i) R4 R与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ' k; ~, T, X2 X
6 X) M0 Y$ \# J5 ^1 S3 T

c/ _: b U) u. `1 p: r3 @7 m: l该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){8 Y. B5 i6 _: k4 S
3 w1 \2 z* {7 f) O
//打开
3 a8 v% G1 E; }
! O/ D' ?& D9 H' Z) I9 v. {* ~( u
}- ?" m" O, `/ \9 Y; L' @# a3 A
8 a: R, D! x9 h: z, `2 k: P$ S
* }2 E( j1 e; i+ t' r. {2 I+ ]& ?
socket.onmessage = function(){: I/ V3 g2 t, A, T& ^1 d
5 j0 S; l! i" _
//在event.data消息数据. [; m7 g- u/ }7 E
: }! V3 G% h5 z8 Z& B
}) p" f1 Y3 X' A
, d- H* ^, p+ P( l
socket.onclose = function(){
% w' G; @$ j: E
$ G. ]& x# N1 Q
//关闭WebSocket# A8 |5 h$ E" w
6 q* I5 U! |# F; e* ?, b( f
}
' o" h6 d$ l7 J. G+ E1 H
1 @! e+ Y6 F+ [; G4 u
socket.onerror = function(){
2 ?* u* y! y! L$ O$ s
, H/ j; c. i7 V. k0 |* c/ ^' ~: H# }
//错误触发( C4 ~( Z! H a- W2 X( u: c! y3 c+ {
L( o- ?0 b& y; k8 n, P
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>; Y8 a2 z2 `2 J+ f( ] s
<html>* G+ y, D& d- f w3 k c4 S
9 u' G$ x- G' O9 |* J& z
<head>
7 P8 s' m# J- V
<meta charset="UTF-8"> E/ l/ A+ _; V8 R2 @
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
# E9 V6 x7 W9 z4 l* p3 \$ c
<title>WebSocket</title>
0 o4 R9 g7 e: p& C S; M* E
</head>- P% A0 {0 [- J) f
Z; I6 h8 A5 ^# C" H( a! \4 c9 O
<body>) H% ~# N" Y% n8 g2 B, U8 f
</body>
1 [6 ^4 X$ q5 e" [! Z
<script>- o8 Z8 g; e3 Y+ e$ k- O# e) A
var socket;% E% L8 y: M+ q$ y! d5 L0 d: R$ q4 S u
if (window.WebSocket) {
4 Z) Q9 Z. W! Q" b8 z% H# a
socket = new WebSocket("ws://localhost:8080/myapp");' a e: S+ U! n$ g, s
socket.onmessage = function(event) {
0 j5 ~/ v6 ^2 F1 S1 H' g& | h& [
alert("Received data from websocket: " + event.data);
& b4 T" E+ }7 ]% Z- A
}
; [# O! u6 L$ i# o
socket.onopen = function(event) {7 p, G2 P" |, S. E3 v2 f1 y9 _
alert("Web Socket opened!");
# Q9 S5 c+ P4 ?+ t: ]
};
* b' L: Y$ a {9 D' C q
socket.onclose = function(event) {
4 Q# r3 h1 |; [( i' D! g- ]' `
alert("Web Socket closed.");
$ n' G& }, q, J6 p' U: G: M# a' E
};% @ g7 O- I8 L
} else {
- r/ w$ `8 a* F: h" ^% p: l
alert("Your browser does not support Websockets. (Use Chrome)");9 J9 |; H/ ]/ d4 j
}
) {$ c* @5 V! w, Q& H8 W$ F
! q5 s/ F2 F3 c5 i7 s
function send(message) {
" h0 N; \1 F* f( q% e+ R
if (!window.WebSocket) {3 U2 R) u2 q: V) W" @
return;! W% }- b# G' Q( P5 Y; C5 J4 b) Y
}
% r9 k7 s4 ?6 m E0 C; {
if (socket.readyState == WebSocket.OPEN) {$ y5 z: x6 q) [' M; y
socket.send(message);; p' o: E; p z+ |3 m: [
} else {
# @4 E8 T1 i, v$ {+ c& U& v3 l j
alert("The socket is not open.");
% ?# s- N$ }6 Q- p6 c, U
}
3 W# E6 J5 t* m7 y7 S' ^# s4 g
}
) a2 e r" V) D' d
</script>
2 N/ d9 }; O5 u4 `% d) l7 T
3 I& a- |1 O, [! g# ? n
</html>

复制代码

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

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

浏览过的版块