浏览器使用WebSocket实时通讯

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

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

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

复制代码

5 i; L! c( G' N# P* Z& \5 l与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
& f8 n, G& `( H( x( i6 q0 o
1 R0 M* e. ]7 m1 O
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){8 n F5 [' \% \1 s
. s; v: T8 c/ P
//打开# z1 M$ T; d2 ~' [' H. y# y7 k6 b9 X
! v9 y2 e, N1 n6 w
}% U- k% M! S0 {- S! c& v2 r2 t
4 X: Y) |6 g! X1 c8 y
# P, V/ {4 Z2 s
socket.onmessage = function(){) |5 v* c1 w/ i* c7 e% n1 j
% D' h0 r, { D8 s7 W8 M
//在event.data消息数据6 u9 r- k& a d7 ?% }/ {" G0 _
1 j+ ^! E2 N3 r; G4 e4 ]
}
& c" d$ B/ u3 h: d
0 S: p- T( m. {0 }# K/ d
socket.onclose = function(){
1 ?5 i' w+ \% A# t
) J. V0 z( f, r( {$ m
//关闭WebSocket3 |6 ?* q4 d+ W
' Z* P; L- m3 P
}
3 f) q1 j: c& R$ t
0 R! W3 {. J7 A8 \
socket.onerror = function(){
A' g) k; A# {* H; P) ^
3 c* Y, g1 K; z" _+ z! s
//错误触发
- f/ B$ C6 f* O# j
9 G: L7 H$ x7 p7 }
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
. ~+ M. p: j6 Z# k/ ^6 x
<html>; f% ^/ Y* Y: f$ [% F
* `7 e' ~9 i0 }6 [$ _9 W, T2 [
<head>
) `9 Z/ o0 `7 v( v+ h
<meta charset="UTF-8">. A' \" [7 R$ `. E# s/ C) U
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' T% M) Y" Z7 l8 |1 U; _$ @
<title>WebSocket</title>
" Y$ U, x6 T2 n0 g' T- K0 R* h
</head>
5 B! I8 V% x& T* n
<body>2 x; P5 N: P! X5 y: T
</body>
& x' [6 B! G0 s# E! p
<script>2 ~9 f6 ]6 N9 b; G
var socket;
' L/ j2 x" k& \& x5 x. T+ ?' m" d
if (window.WebSocket) {
2 Y9 F0 d) U* |! L1 h& i
socket = new WebSocket("ws://localhost:8080/myapp");
5 W$ v. G# D" A( m; }. U9 L
socket.onmessage = function(event) {8 i2 f/ Z- T( b" d: n" |
alert("Received data from websocket: " + event.data);' S7 J7 T9 c m
}: K/ {, x3 m$ F3 b( D
socket.onopen = function(event) {; K1 t* H- ]0 h) ^6 e6 k
alert("Web Socket opened!");0 }# c3 V* K$ F7 @/ y
};1 ^& R" Z. ~! R% `4 ~* o
socket.onclose = function(event) {' O! s7 Q& Z; d- |5 L7 L4 E
alert("Web Socket closed.");
* g- C/ F9 d: F- R" q) a: i
};, e+ h* y+ V, k" G5 {8 L- i$ d h
} else {$ O1 p: U/ f# g e3 S' V% x, t9 U
alert("Your browser does not support Websockets. (Use Chrome)");* p, g+ V) y# g! k5 p; Q5 j
}
c8 g9 c6 E# a) Z+ w$ g% I/ X
0 o# U3 K. H% J" N$ V4 @
function send(message) {; s* Q# V, Z* ~
if (!window.WebSocket) {4 {* X+ @1 @) r8 x7 T
return;7 \4 u! \. d8 l7 \3 r- l! k ]
}
: ]7 L1 S. D1 c+ `1 v
if (socket.readyState == WebSocket.OPEN) {
% Y+ }! U6 R$ h- t- |' C
socket.send(message);
; M6 S) m& H2 T; }9 t( {
} else {4 z U6 Q3 ]/ f3 a$ }( F" U9 J
alert("The socket is not open.");
, L0 h d8 T. c* T
}
* o5 Q) [2 B1 s# j; O' {8 ?
}
. J( L6 m, T3 D
</script>
* G. v9 @0 ~! {2 l! e# _8 S2 v
' e6 o" n* `$ C$ T/ e# I& b; q3 Z
</html>

复制代码

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

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

浏览过的版块