浏览器使用WebSocket实时通讯

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

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

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

复制代码

~ G0 _6 d; S e6 M2 U9 m. m' y与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 * r* Y' t! ? D* g5 i* X8 m0 ^
0 u- v" u) f# d1 N- z; u# U
/ V7 z0 O1 d1 k0 C
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){6 J- N/ j" m' ]8 V( t
) L5 O& @9 w* C
//打开
6 b& ~4 T8 E8 q; ?! G1 s; y
$ E( Y: v7 R7 d: s, |" V9 ?
}
1 {, R, V+ ^5 i( }8 I
, }. V& P5 c# Y/ j" K9 J
! `/ c& O/ W9 ?: K( ~3 i
socket.onmessage = function(){
1 W, ?6 W' r/ d# ?
T! ^& P2 X [! H
//在event.data消息数据
1 o+ Y2 |# h: r7 b& x1 o/ _1 X" Z2 @6 W
8 e5 V$ J/ J: g9 u3 u5 u8 u
}
! z* K) U/ T3 l& L+ U
% x1 T$ f% @2 Z3 F. u
socket.onclose = function(){6 v; r4 t+ H+ c0 W: b+ {
3 o& L( U4 U7 S0 z( \
//关闭WebSocket# p0 l2 N- i4 D1 K3 e: o& i! S4 M
! d7 W) U% F8 g7 I5 X: ^6 C' P
}8 T1 m/ `- A* x! c+ G: }
5 X. P8 ?2 S; T% ^. Z, g0 f
socket.onerror = function(){
g( a' o% w C
. O9 F# I0 P. Y |
//错误触发
, h3 j& _4 p, I* A/ K+ @
2 [3 P3 n9 Q% B1 J y$ o' Y& T; o2 W
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>9 h. y; z& M1 {: S) [6 i* A
<html>& N2 g- h$ r C. p6 v8 g
5 F t0 V2 f/ e) C( j' Y }* @4 ?2 W
<head>: Q. f: E7 N% p3 Y. S
<meta charset="UTF-8">
9 v' C1 d2 Z$ Y& o7 h1 R
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
/ n' B5 i$ V0 s+ {
<title>WebSocket</title>
+ `% [7 Y* B0 h8 o! r
</head>
/ K$ s' _/ O8 l, X8 j, s3 O
, J! E# \ F9 u6 f0 S
<body>+ b/ |* i3 d, I: O+ ~$ g1 ^7 m! m& a' f7 a
</body>/ `6 f' C5 `( W, V1 }2 ^, N
<script>7 A1 q9 W0 y3 H8 [$ N
var socket;$ D4 v% a( A; `
if (window.WebSocket) {
+ E5 Q! R V; ^: K, i
socket = new WebSocket("ws://localhost:8080/myapp");
* b" z7 m) G9 _% k
socket.onmessage = function(event) {8 D R8 C, E) w+ }1 X9 ^
alert("Received data from websocket: " + event.data);/ }+ {- C7 C) U, p: J# y
}
, f* ~7 F+ h" C4 U( P0 j; M7 H
socket.onopen = function(event) {$ w2 q; W: l) {: n7 h6 ?2 i4 @
alert("Web Socket opened!");2 q" i" [2 ]. }* x" {
};4 R3 k5 M8 I6 c" W+ d' V
socket.onclose = function(event) { h. _" d3 j" h Q s6 ^5 _% ]
alert("Web Socket closed.");
9 N0 [, y; K( g$ {6 _8 L5 l8 D
};% T; a1 O$ f/ J+ n0 k, z. D
} else {
% c5 I4 y' V# L2 E# O
alert("Your browser does not support Websockets. (Use Chrome)");
( p9 y0 m9 e2 r5 _& i5 h* B% S+ q
}' o* m& t+ O) W7 G& [7 c1 g
' F4 \0 }' m$ o
function send(message) {* e, m' `8 T {# d# D
if (!window.WebSocket) {( n: f7 [7 y2 D( Q% a n$ Q
return;
3 V) [7 M. w* L) E1 Y5 ^ M3 R! j
}
h, A/ T2 k& [: `
if (socket.readyState == WebSocket.OPEN) {, c7 |% F7 j7 N( W4 K; |; w: b( q- e4 l
socket.send(message);7 Z( r+ A7 V9 R" m
} else {- Y" g8 J8 f6 J+ a
alert("The socket is not open.");
. I3 x8 X: M u1 m; ?- Y J' ]1 e
}
# z4 n! ~: u9 h. m5 f( e
}
# K; H4 |* N( L0 g! p n5 ~
</script>5 N0 a( Q1 }3 f. z. ~& v1 n1 h
( B; e1 K( S4 \# a& B- W
</html>

复制代码

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

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