浏览器使用WebSocket实时通讯

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

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

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

复制代码

3 n6 [9 |! P2 B, q2 M9 |
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 3 `' S9 N7 K p G0 z+ }1 P

3 r' ?" u) }( y8 R6 ?3 s; m2 g2 R/ v9 `9 z3 U
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
! b3 N4 v9 h2 B6 r2 U: y
% w% `, V {) o; P/ z# A5 I# l
//打开" z- n6 A$ {0 F4 y% ^1 s3 y# @* B
. @9 t+ T! l1 s9 I( @
}
/ U- `. l) J: Z! [" _9 |. [
' {' L* i" Z, h7 H* c
- {/ o. S$ }2 H- D0 g3 @ ]
socket.onmessage = function(){
: t& s# _ S8 k
9 \2 |. k- U6 l
//在event.data消息数据, k1 b3 M; i$ u: c/ W2 T
6 l' D8 g8 t0 p/ k; ~% t/ l4 `2 ^
}
g' b$ p8 V6 L% f: L& @+ U
& v9 d, N8 o& H5 D4 k+ P; v" X$ I
socket.onclose = function(){
s8 K% C/ w- X3 L
6 V" {/ w1 Z$ _
//关闭WebSocket8 m E8 o2 X" w. Q
& T+ w* F$ G' N6 k& c, @; D( g; X
}
J$ T5 h N j
9 N- _5 z# }, Y* o* q
socket.onerror = function(){
( G, N- C) R' Y9 ]# K# E
& J0 }# d: n8 |; X+ b0 [* M
//错误触发 V$ K) F4 r# A S( M5 a
9 H+ q! ^5 L0 {7 O) m( L( ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>3 @- H7 B6 l( J6 W9 t
<html>: ~+ i8 {8 {5 E D" G- u4 @
# D6 E# v) A! Q5 q) j. ]9 Q6 Y: T
<head>- E: q/ s) X& |. l8 f5 \
<meta charset="UTF-8">
( i$ p0 p% _# f0 {: U
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
" L3 r1 A( `- S
<title>WebSocket</title>6 s+ _; r N% H9 ^- b2 \; ^5 n
</head>! x$ F- D& X ?/ j5 x
/ c- E+ s2 X6 o
<body>, A S# x& t# r9 p# u
</body>
0 Z7 I$ x9 k" \+ o
<script>$ y" a5 ]; l/ L: D4 i7 N. v0 B
var socket;7 G. Q3 J, x; x, Z0 t3 q
if (window.WebSocket) {
' S# d, R: G4 A+ i5 _+ n- q d
socket = new WebSocket("ws://localhost:8080/myapp");
% O4 G2 s( E" J9 {/ [# I
socket.onmessage = function(event) {
! B9 b! }6 Q( q: {
alert("Received data from websocket: " + event.data);
+ H* X& O! d, D1 I, t' c y
}
" W2 T4 S; B z9 { u2 `
socket.onopen = function(event) {# z) S1 k: E( q2 }: f+ v) T
alert("Web Socket opened!");( R* Z9 k( i$ O+ W( s
};# B: l# {, g, U: g5 `6 R
socket.onclose = function(event) {
9 {: V$ H+ L4 y% ^1 s' E
alert("Web Socket closed.");5 x0 c6 D2 D6 H- X
};1 ]+ q- F0 X/ h. O1 p" E+ D
} else {) }3 {8 ^/ d$ C! {2 j
alert("Your browser does not support Websockets. (Use Chrome)");
6 k! y2 F& F$ V2 B8 A
}4 c& R* y9 q5 K3 I, [0 M7 W
5 b5 D( l- e' v R R' a: \8 Q
function send(message) {6 Y) N w% E$ H/ Q5 r$ v% Q
if (!window.WebSocket) {
. e+ ]6 w6 O( [& u; q( i4 c4 Q5 A
return;' ]7 W9 Q' @* ^: G T7 _
}+ S. \! x R: c/ h( d" F+ k# x
if (socket.readyState == WebSocket.OPEN) {
/ H _% x8 Z( t' @+ }" C: p5 U* M
socket.send(message);5 j1 @" L/ D; e% S0 Q
} else {% J" H7 J, L9 e a2 c3 Q
alert("The socket is not open.");
7 t) W( z0 u# e, j0 L3 X& D
}" ]! H3 c1 I: f, ~2 H5 ^( O1 e" Z
}
4 c% A9 w7 I8 w/ P
</script>6 {) j1 L% ^/ H' r& |8 x* T
( D& Y1 P( Y' L e" T7 G
</html>

复制代码

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

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