浏览器使用WebSocket实时通讯

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

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

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

复制代码

/ Y" \% W" V8 ?9 Z; g$ @4 \0 w与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
# f6 g5 S& O @ i7 ~; D1 O ^5 y( w& N$ F
. e& o' d, O' [% \6 g9 L3 y
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){; `8 [: N& k+ I$ y
6 E6 T. S( B! d- h
//打开
2 s5 o2 Y0 o: _0 S0 W
7 o% f# f8 a- p+ t% l6 k, p
}. ~& h$ D# j4 J2 C
+ Q4 U# @ s* @% ?: B( t
! V7 j2 S% q3 Q4 @8 D
socket.onmessage = function(){9 t! M$ w6 w9 s5 C/ y9 r3 Z# m
0 C" Z, W: i8 p# w1 h( V; m9 O& A
//在event.data消息数据1 x, N( q. t) ^: ?5 P, g
" G, @5 b+ l/ v8 ?
}/ t7 Z, d; v$ i9 n& l. u0 y( T
% E3 a* `2 c/ W3 d9 `
socket.onclose = function(){( z- w/ X" c+ q$ G% t
! }. G2 J. b q( t. b3 N, s5 M$ d
//关闭WebSocket
( R. h, W( _2 \6 l
5 x% l+ o0 Q4 [" `* G& \6 `
}/ O6 Z+ J# B/ x
" u0 u. O$ ?) v( h/ P0 A4 m+ P
socket.onerror = function(){
# z8 U$ Y7 c6 ^5 a. P2 h
" z( A* r8 c# Q( f: L5 s7 C
//错误触发
; I. x+ X% G8 T$ J! W- g7 v' \
! b i2 C0 Z( m- D# m% b. L
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>8 A2 |- M" m! {
<html>
6 o, r5 q ^: z& w1 U6 ^, U
! T% k5 Y3 A/ g9 }6 C
<head>
1 n9 u# a$ @% k0 S
<meta charset="UTF-8">
" w' [1 H2 M% J. ~; M
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">2 k6 B% w, | `7 U5 q0 `3 Q
<title>WebSocket</title>
, t+ O5 S; E8 c; L1 E9 N. Y) T3 C
</head>
7 c9 q |- m* z% a
- J' W6 k" E& g7 f- i
<body>/ y; }. G# T8 X& G9 y0 z7 A
</body>+ V$ c! v$ Q4 C* f& k }3 X& E
<script>- w) F1 A2 m8 I1 b) m* n
var socket;
if (window.WebSocket) {
+ \; J( g! ?$ ?9 o6 {) s# f8 S, K- }
socket = new WebSocket("ws://localhost:8080/myapp");
2 d8 d& z2 b* E9 n
socket.onmessage = function(event) {
3 M+ t% R. P6 H" R$ ~% C- B
alert("Received data from websocket: " + event.data);
; e4 i# c: h- t% u
}% J, A9 A [2 o
socket.onopen = function(event) {
3 j0 t! c) N* U; F, h1 H `" s
alert("Web Socket opened!");
6 x* F) V3 @) H- H& a' \
};' U: d& l/ e4 f/ `, K2 y6 b' j6 ?
socket.onclose = function(event) {2 {1 M1 r' i3 z! p# _0 t
alert("Web Socket closed."); @, v; K1 z, x
};& S( M# S' U; H& U `2 a% K" u- S
} else {
7 M% ]" Y5 f( L8 \0 [
alert("Your browser does not support Websockets. (Use Chrome)");) J9 ^2 W" }6 O3 E$ Q7 q4 @
}+ U3 K$ `9 t3 Y- p4 U3 Q
* p$ |5 r* J; g* {; p% u
function send(message) {
& q; ~9 r& G3 B" ~9 b
if (!window.WebSocket) {4 G0 _ ^- c5 g3 m
return;' j" X6 p8 f$ _0 i( C
}4 G% I9 K7 e# L" B" h4 ~
if (socket.readyState == WebSocket.OPEN) {5 H+ w, \9 n. y( B$ Y
socket.send(message);
) [$ H, X! u0 }% ]) _
} else {
, w' I* G1 w+ n) w0 u4 S- b
alert("The socket is not open.");: A. g$ H7 a) Y' \
}, g$ S( P8 ^- t$ u P+ U2 N
}2 \5 ?7 w+ x9 K1 U# X( X% r0 f
</script>3 s' u7 M% O2 h, _" _
+ @& k d# k/ ^# O6 |, f! S
</html>

复制代码

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

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