浏览器使用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:// 前缀。 9 j, v' q; a, w( A3 |; n- s$ }/ a
* f& S, K# U, a8 n1 _$ I) d: E
# D8 K5 w7 ^# f( h! B1 W$ H3 f
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开! Z- V. I- z) N6 O; A: O+ _0 c
}' Q9 u- a, `+ }# c0 r
3 v+ G. o$ y' F$ N) ^
socket.onmessage = function(){
9 _; V) M) e6 a M$ r4 n" z& @
//在event.data消息数据
6 j- x* J" V" Y) s/ f) `
}
) a4 d# G9 K/ I/ o
" f, i9 o% L2 M
socket.onclose = function(){- U0 m/ v* N8 _( c
//关闭WebSocket
& d: U* X* A. Z* b
}
9 t% m( C* z4 c8 E* l }! O
( [. ~1 s5 o5 S. g9 U8 n: L6 B* k m
socket.onerror = function(){
4 G% O' z5 l- e( _/ y; a" o
//错误触发3 e5 y, R" @" C) I
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
% E+ X0 M! P, Y* T9 z0 ?$ j, f5 N
<head>6 y& A; ?: c% } Q+ z6 n
<meta charset="UTF-8">* z+ _; ?$ _& c5 S7 E# O
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
% ~3 j: ~* [0 Y
<title>WebSocket</title>! L7 n* N; `- Q* K
</head>
4 \0 N: t/ Q5 H- L% p6 r( a
<body>
; ^0 \1 Q0 }4 p: r! ~/ d( S' f: T' |1 b
</body>
1 L+ p/ |; ]# z+ ]
<script>+ E+ T% K2 j: [
var socket;3 P& l5 O+ X: D F) |. u
if (window.WebSocket) {
/ ]' ^, V; D0 I- A; `# B7 l O P
socket = new WebSocket("ws://localhost:8080/myapp");: g F3 I; h8 L) v, |
socket.onmessage = function(event) {; f: w m5 h% J; g# x H6 A: M5 ^
alert("Received data from websocket: " + event.data);
$ w) }; B% I% c# k+ E F4 ^
} X% [" o) D* p
socket.onopen = function(event) {
, l2 ]% q( m; Z+ R J v# z2 q
alert("Web Socket opened!");3 ?1 x8 n2 T- j: y3 E6 e s
};
% V5 J: A4 ^ A0 t; Y/ }% X+ L
socket.onclose = function(event) {
: @/ u. C) w6 W Z- J4 X6 m7 q9 E
alert("Web Socket closed.");
+ G3 {6 b z* q+ j e5 i. I/ N
};7 x& H2 `: _/ x" p0 J) e
} else {) ^$ B3 Y- i; T; Y5 B# `, F
alert("Your browser does not support Websockets. (Use Chrome)");
/ Y! I' I8 `, q: V5 w8 Y; a8 S
}
& q. T$ I' G1 m M2 k! r# r
( y- L4 }4 p( ^) D0 K2 N
function send(message) {0 F8 V% K) d. M6 j, g1 ^
if (!window.WebSocket) {5 M: z8 F3 {& e& i7 p+ O
return;! [! i! U! A4 B, R9 e
}1 ]9 R$ l' ]& }4 w( r
if (socket.readyState == WebSocket.OPEN) {7 p7 F0 G& a, B1 O D
socket.send(message);6 K' s$ s! H/ Z% L
} else {
) m- J' n3 X5 f; I/ m; O, |4 \
alert("The socket is not open.");' @8 l7 a5 f6 o8 R5 @0 A' u* x, g
}
- x+ X7 R% a Q, }2 ?, P- |- f5 n
}
: ~, P0 F7 r2 z6 R0 V+ [* q K
</script>4 \/ X0 ?/ G+ \3 Q: Q
</html>

复制代码

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

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