浏览器使用WebSocket实时通讯

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

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

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

复制代码

8 W* ?4 v- K# X; D' k4 H/ W- z
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
8 |9 c2 v {( S/ o6 L, ?. ^' C; ?8 n# D: Q
0 Y8 q2 F q# \+ ~
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
1 `$ M1 l* O1 ~3 f& U& Q; @& J* y
) c7 J/ n4 j9 Q
//打开
' T/ M5 ^+ v& d8 _% m+ J
0 ?4 @0 i. T- e1 g9 ]" s6 f) T
}
+ C& O6 B0 k8 g; `& n
& M7 V0 [! `# Z- j: N, J E$ n: d
. R2 N& {6 h/ [6 O5 J
socket.onmessage = function(){; C: G6 @ ]) @2 Z
/ R. D9 Y* k# ~# `
//在event.data消息数据
8 L2 f4 R$ ]/ r, l: P
' f% ^4 ^" ~7 U/ @
}2 L) c6 T( s! r" a: J. b! L1 Q
4 R. f9 o+ w2 o! Q4 ^4 o7 C* s6 B+ Z
socket.onclose = function(){; e: z# L8 K) l$ d: Q
. w# t8 K, |8 V s/ M
//关闭WebSocket: Y8 `! R. z7 v5 t) x
! ?4 g2 M) r& S4 T* L) _6 P, f: G
}
+ U, u D$ `+ }% C
5 W. m8 a/ X$ t2 u/ q
socket.onerror = function(){1 @4 s8 j% s% k' D7 J
- G y! m+ }# W- o
//错误触发
8 `4 p" q0 n% L% w2 `; V
K, r/ t5 W0 Z4 `4 n, S9 _/ ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>/ Z( g! P. J0 p% a+ N
<html>
/ G, Z" m6 B- t p
0 \+ ]2 [! J: N8 M
<head>& u: d, j5 b% v, g
<meta charset="UTF-8">+ B5 t% T4 `5 W# N) m* |
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
' x! {" n- |4 X% r D9 U
<title>WebSocket</title>5 B$ V& x. f6 C# E, |* ?
</head>
/ s: e% y8 n/ k4 j I) |
/ w- t+ H1 G, E7 c6 y
<body>
9 E# K. B; p' t
</body>
- B, L$ N v/ r; s
<script>9 x; f0 {- u/ q: }
var socket;
& h+ {: O6 h9 j
if (window.WebSocket) {
4 k4 _3 h& U+ W# P0 {9 ~+ k
socket = new WebSocket("ws://localhost:8080/myapp");$ } z8 `& M; v/ _: Z
socket.onmessage = function(event) {3 i/ p4 W6 T* }- z8 \ j
alert("Received data from websocket: " + event.data);
" s O( n4 P8 k( \9 \
}
& _/ u* L5 A X# f# n
socket.onopen = function(event) {. U: \" `* Z" q$ B( o
alert("Web Socket opened!");
% A& R2 f0 D4 d- z
};5 x. B. y' E7 e* H& P
socket.onclose = function(event) {
# v- g3 n( H4 |% F' g9 Y) k5 P
alert("Web Socket closed.");+ l6 h& e; ^8 S
};, h2 e4 \4 N) p4 Q9 [) G
} else {
* X$ f. m& @( C! b W5 I
alert("Your browser does not support Websockets. (Use Chrome)");
1 {# C! A& N ` z9 d% l, P5 U
}3 _' J2 z( Q$ e3 d- W0 `: ^
/ k' q) v. A6 U2 o
function send(message) {
i3 {- j: d& Z- N* Z5 x; U' X
if (!window.WebSocket) {
% J _2 E$ _$ Y
return;
, U: G8 e! h2 m3 P2 X
}0 q3 p! F# n& k6 P3 \; J
if (socket.readyState == WebSocket.OPEN) {
7 `; Q7 i# A, U& r0 S3 c. d4 m* |
socket.send(message);2 y" e, y! N" k! S6 ]
} else {
; W" r" c5 r& V/ X% t- U
alert("The socket is not open.");
; r% b1 N3 c* g O+ [$ h+ E' Z# o
}
1 K, \8 u. D7 ~
}
& i8 d. m3 |7 ]4 U
</script>
6 }6 i. J Y+ n3 Y7 \
3 b2 d. J6 E. G
</html>

复制代码

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

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