浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 5 v4 T9 r5 x% e! U' q
& w3 f$ L# B- h- R) ?: p/ e

8 N5 [' b# N/ O该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开* q0 n0 Q7 V, L* h! o" z6 I
}
1 ]* k/ @6 q5 ^, H8 \
4 ~4 u+ p" O) }7 Q: Q
socket.onmessage = function(){) N6 Y- D7 @& X
//在event.data消息数据4 T" o- x& a( k0 w0 r
}9 W3 {. p3 }9 h9 W) T T& P6 p
8 p) b4 Z8 b5 B$ K+ E: K K3 Q
socket.onclose = function(){0 ], Q. L- w! U$ o3 ?4 W4 D" U& ^
//关闭WebSocket
' O5 L% E/ j2 u4 g2 |* D
}
" Z) q4 P3 K+ x. }9 z% [
# v% w; ^, t; h$ w& s4 i
socket.onerror = function(){
2 F ]3 h2 \) d9 e; K7 B
//错误触发, ~* C: p6 o) m; H
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html># c$ I( b' C ^7 \8 r2 M
<head>, `. v2 Y' Z$ ?7 k' @8 x3 ^
<meta charset="UTF-8">
/ ~. @ d' s1 W1 r4 f$ g9 n
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">9 M6 N: V j/ c* @/ |: v
<title>WebSocket</title>0 t, `- D1 M7 }/ q
</head>
% y+ V3 {' w$ S! L" t4 ]8 c$ x
<body>! Z7 _; I+ a2 c i& U6 L9 P
</body>+ X+ K( w9 P" E& V A2 E M* _0 I
<script>) C7 ~, e6 V) Y* b2 I
var socket;
- V3 P1 y4 g& }
if (window.WebSocket) {
1 Q7 T+ @ V: f7 V. x/ c
socket = new WebSocket("ws://localhost:8080/myapp");
$ T/ S, n1 V/ `9 C" U- f- r' U
socket.onmessage = function(event) {1 _0 Y7 |- ]8 B5 b
alert("Received data from websocket: " + event.data);* g0 T2 V, u. a6 @
}
; _: T; w W1 o
socket.onopen = function(event) {, Z$ [1 r1 ]5 G: X, B
alert("Web Socket opened!");
% ]5 e3 J+ {& C r% d- ]! j! Q
};, X3 _( l4 @$ m5 }
socket.onclose = function(event) {
( Z/ ?. f' m3 d0 r7 ]: g" n
alert("Web Socket closed.");
$ g% f7 M# ]2 ^& I: N2 b5 H% S
};
1 p, z. @! G: b/ T# R! X
} else {. Q) ?# O4 W! o: E" s
alert("Your browser does not support Websockets. (Use Chrome)");
4 Q/ I0 n. \0 d: q* D
}
6 s+ {7 b; _' m9 J
0 o2 r% i$ D8 s6 E1 a
function send(message) {
3 G% g% i% [. t7 j" p4 D
if (!window.WebSocket) {& w* ~! F6 Y) ^2 j* }& C0 `
return;
+ I9 L% E0 N: _; S4 F- V3 l( k7 [
}0 S' e# u2 Q) c3 B5 b( I* F
if (socket.readyState == WebSocket.OPEN) {
) b# A1 ^3 j! c- I: w2 U+ I2 u
socket.send(message);
5 g2 h* S5 ?' K* i% g
} else {
" ?4 Q9 N/ M- r1 p+ @* M
alert("The socket is not open.");# P; v- @$ b$ |
}
9 B$ z, T( b- e* j2 T4 C) R- _
}- Z3 T* {$ e+ n+ ]- R
</script>& j; h" {/ b" M }0 A8 T0 s
</html>

复制代码

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

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

浏览过的版块