浏览器使用WebSocket实时通讯

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

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

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

复制代码

; k M2 L' p, a' `% c与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
! G7 F* l1 V/ Y# S0 |; N4 e6 B+ [5 I2 G8 b5 x# [
' C/ ?. q: Z8 W5 J0 M. v* V
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
" L/ d6 a( r# H D
! t) Y% _ n% S5 b; v. a- ~
//打开. ?& ?# h# t7 H+ ~! a
: R" |3 [+ q) `
}) v5 B9 B/ {, X
* a9 \! Y' t1 s0 |: E" B& Q
0 N. y; _; g. G0 @
socket.onmessage = function(){
6 }3 M7 Q9 s6 F, Z2 m+ ~, ]: V3 L0 T
! ?1 Y ?) Q7 O
//在event.data消息数据: T( h u* i# S' f
( m3 U: ? [' D
}
8 E8 R: ^& p: O" H5 u/ W6 T$ Q' B7 W
: M) P, s2 K0 F/ G T
socket.onclose = function(){
* O! c: {1 A% V6 v1 I0 g! y
, l# ]2 M" j/ t' z1 w6 ?
//关闭WebSocket* }+ s. V$ b: G
! M- _: Z( Q( U2 ]0 k
}2 |( C" f3 h" c# d% Z% p
" D2 l) |( V% I7 Z9 \' K: M. }
socket.onerror = function(){9 b+ R& C/ B$ L2 x8 M7 u5 u% Q- h
- z* T' U4 Z' k; D+ g
//错误触发
5 n& T/ Z# R- o6 X' o- |
9 ^% s! R8 i% o- G; K" y: y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
! E, e8 L3 v- Q f) J! [1 m
<html>
5 q6 B, h$ K' U1 y3 r/ H
2 ` l- m5 ]. t, e* v4 M
<head>
- x s V* U9 W3 Q$ |. o8 ]
<meta charset="UTF-8">+ k! p/ E& N1 N/ x, x2 K% D
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
8 a6 T# E: j; O5 F
<title>WebSocket</title>
$ j* E5 S ?+ s. ~' }. Y- Z6 G- |
</head>
9 q- h; |- H) ?* B; g' w+ c
$ o! k0 d. v" t; x. q. \. o
<body>
0 l9 f4 O: K1 }2 a f
</body>
* Y' Y8 S8 F2 r6 [
<script>
~. X' q1 ^; x; R
var socket;
! C) v, W) Q! x
if (window.WebSocket) {
/ u. k) S p, V0 I
socket = new WebSocket("ws://localhost:8080/myapp");
" ^8 Z7 m- U# @# F! F6 K9 T% B
socket.onmessage = function(event) {. T; M2 {# c" h5 K9 @
alert("Received data from websocket: " + event.data);
" b3 ]( V0 `1 F0 H- r- d
}7 U. G5 Z+ `, j7 u4 e2 r
socket.onopen = function(event) {
2 ]7 r$ g, Q& T$ d5 X# |
alert("Web Socket opened!");
+ X' M* ]/ B( a1 }' f' _ e
};1 B" n8 |9 S' [* q
socket.onclose = function(event) {
3 d; g7 Q& v6 W1 F! e
alert("Web Socket closed.");
- a" w% K8 _1 R; |% Q
};
2 s9 \7 G4 z( A8 j
} else {
6 O4 v7 f' w0 k5 A, |$ i: c
alert("Your browser does not support Websockets. (Use Chrome)");, s' n% T2 _' W* A' I
}# t9 d! y8 w. t' u$ M& K% M
* S- w; ^* j, P5 N* q% \
function send(message) {3 S9 @8 |* x- `9 d
if (!window.WebSocket) {1 H, |% F) w' l/ o" o- ~! j7 e
return;" A0 k+ e1 Q1 g! X- b
}" ?3 N6 g' a# T6 Q) w1 E5 R
if (socket.readyState == WebSocket.OPEN) {
" B) n( G3 s+ D
socket.send(message);
/ f: K. w' g* Z* u
} else {
& |3 G# T( _3 f" ~
alert("The socket is not open.");( W$ t; U+ _2 l3 p$ O
}
* J/ Y' s v& |" ~ k
}# e8 a7 ~# S+ ?3 C
</script>
+ s, l( I# p+ x
8 U% `# J4 V4 Z- O: f9 ~
</html>

复制代码

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

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