浏览器使用WebSocket实时通讯

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

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

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

复制代码

$ r# Q2 |( G% V- A v与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
$ w4 G3 I- B6 ?$ G) b4 I3 n: E9 i& y

6 e8 N& `# y5 a. r该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
* U0 ]0 ~- @9 K1 U
8 X5 n$ O2 o: _% K$ _( G V% w
//打开: ^2 f1 K" d+ O2 b2 Y3 W7 j4 M
. c! o% h6 Y+ o, u
}: S# u8 i+ f5 ?6 p4 T5 X5 |
& Y: a) I" x! o' j3 B
& W# V& v6 F# D; J% }
socket.onmessage = function(){
( C) B& R; @# L! t
l+ l ?8 k: @) o! [ W1 l2 i
//在event.data消息数据; d0 e9 W {- t3 j
: e+ g* r8 T& l/ O( Z
}4 ^6 ?( `& Y' J, \
$ `$ S- Z# O+ n% C* {. W
socket.onclose = function(){" V. G7 y2 r& G) e! o
' h( q b5 _" Q9 A
//关闭WebSocket* d5 `# _$ [3 X" j' T' o1 T6 N z
7 i) G0 R* m' h$ z
}
2 Y: g1 s+ [1 k. r
& }" \9 n9 c6 N: |' u
socket.onerror = function(){
( m1 \$ u) k4 L+ D
( Y9 w; W: d' Q+ P9 `. J7 |
//错误触发
- {. e! `+ s; K2 r5 C. l3 z
; L9 S5 ~- J @, X$ p) |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
; F; G6 d2 D( J
<html>, f& r* t" a! M% m$ `
. H: p+ A: D/ W9 L/ E0 m
<head>
, f, V3 b( ~. V3 X! n
<meta charset="UTF-8">
6 z2 h) B3 Y) a7 c9 N
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ O8 m( c/ W: L
<title>WebSocket</title>( o* c/ K$ O+ N. G- t- @
</head>
, `' v1 L& W3 @2 c( b0 w2 l
* r7 X5 Z3 g5 c( C( h: g# x
<body>6 E4 T% a2 {0 ] @( t/ {% f7 b
</body>
# M6 B3 Z- E3 }8 D0 m+ `& N0 m
<script>
5 d- F4 h8 B9 Q+ _9 h5 G
var socket;1 K* C2 r; r, Y6 t1 {+ E) C: F
if (window.WebSocket) {
7 t3 \! A+ ]$ @' [$ V2 ?
socket = new WebSocket("ws://localhost:8080/myapp");+ V3 H# N( V9 F+ [
socket.onmessage = function(event) {) c* @9 W0 m7 K8 A4 u- l
alert("Received data from websocket: " + event.data);4 Q z" I- e+ n5 X- U
}7 @$ Q, h1 R# u9 `# C. b# r! W
socket.onopen = function(event) {1 C! F. c9 q# P
alert("Web Socket opened!");
1 ?$ W" F' ?3 N. ^( ]' F4 j, A
};
9 E9 r" M+ a: K; {
socket.onclose = function(event) {6 C( R" t6 W4 }! R+ x- ?
alert("Web Socket closed.");% ~7 @0 ?9 D# U6 g' a& ^
};, T Q7 X5 U4 T' J
} else {
5 v, K4 k& N( @/ r4 ?
alert("Your browser does not support Websockets. (Use Chrome)");
k2 i- F! E/ k/ V
}
# [( d; U# j1 K* B' k
! L! x# d% L: `
function send(message) {
, Y1 s4 v7 m! L2 m* e9 P" }( `
if (!window.WebSocket) {
: s$ @+ G, _3 Y; A. l- A
return;
; M6 e t8 v0 z& o1 p. N
}; J/ n; |( A# C) K1 K% S
if (socket.readyState == WebSocket.OPEN) {
4 h7 A4 I9 P2 }- r! X
socket.send(message);% T, j5 o, A9 Q z. M! z R
} else {
1 a/ M4 f9 [0 _. j0 k
alert("The socket is not open.");2 ]) G- I* ]" C8 ]# k/ q5 n1 k
}" Q/ I3 q- e2 U9 P
}7 x8 S( \1 o8 \1 ~
</script>
) Q- v/ V5 S; u7 y: v
</html>

复制代码

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

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