浏览器使用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:// 前缀。
9 G' M& \1 U; s. F- q
9 H- L( A+ _. q4 y: w, v
* |8 w4 o" u$ V4 z# Q该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开: [; F$ p" T% i9 T& Q
}
3 k$ R. p6 T2 }+ F
3 u4 X. y6 W( i% w Z+ d0 a
socket.onmessage = function(){' q# B3 x5 k+ o% u
//在event.data消息数据
3 r- T1 Z& ^( U7 L& k; l" q
}
/ b2 D2 \, Y/ y
' J6 g2 i) `* m+ H) J: h/ u* I. W! m
socket.onclose = function(){
; f8 N3 D+ o# r" l3 _! d6 v
//关闭WebSocket
2 E, D# J! f! s+ O) H
}
# E+ g/ X$ p6 ~' A2 M
0 E) s. S5 D' m9 E* Y2 s# R' N: i: Y
socket.onerror = function(){
) j- Z4 J- e; ^; L& v5 d( E t
//错误触发% Q- E" p$ s; N1 J) |
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
6 S! e8 C$ x1 w& W
<head>6 o' m' t: G( g# F: Z' B
<meta charset="UTF-8">
/ h$ `5 [' K, w, U f' L
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
% y* ]9 f. c' h' ~$ Z1 S
<title>WebSocket</title>
1 `' [. P- e. b! q; P
</head>, y' I# d o: `" A7 E
<body>1 q' r; I7 _4 s P
</body>
% R) T- |; ] c2 F! S$ q
<script>
/ L) `7 I0 u' C9 v0 P+ L
var socket;
" U6 i# ]% A( H% e* q8 e3 r8 L, Q. R
if (window.WebSocket) {/ o# D3 t, k& K: |$ Y8 w
socket = new WebSocket("ws://localhost:8080/myapp");
2 S7 g5 d& N9 B% z
socket.onmessage = function(event) {
& u# [( o" v7 S- D8 K0 L
alert("Received data from websocket: " + event.data);! ?$ z2 F7 k. `1 O
}5 G& u! s& T# w# m
socket.onopen = function(event) {
+ ?. p9 N2 X% `, D* m9 ` k: t* \. G
alert("Web Socket opened!");
. k6 G9 ?/ t2 K$ b: f! J1 I+ r# y
};4 [6 I6 l; N# Q& `- t4 L
socket.onclose = function(event) {
% Y( `* l& y8 D2 s
alert("Web Socket closed.");
, |, u3 [4 K4 Q$ d- ]* B( q
};
2 z0 R0 L; ?" B" h/ Q
} else {
) o1 }% w" r4 G6 w2 F# l
alert("Your browser does not support Websockets. (Use Chrome)");- c8 h, h- ~1 c- ?+ h D9 W. j! @' i
}; j4 w3 W: ?% w( _" X& \6 M5 c
* A$ Z8 A" J5 j3 D! K, i
function send(message) {
" c) c' y% o! f
if (!window.WebSocket) {
* [2 Z" Z) P e9 ^8 v& Z
return;/ y$ d! i+ F2 c* n2 o2 S+ d; v
}7 ]3 Y2 | r6 ^: k# W5 B+ f
if (socket.readyState == WebSocket.OPEN) {
5 v, Z/ l( _' Y/ i8 D" {
socket.send(message);
& m# a. e# P8 G' N$ n
} else {6 L, s* c1 V% F* p/ G Q$ _+ Y# d1 G
alert("The socket is not open.");0 t! _ N! y4 Z4 b6 H, X1 ~. K' X; j
}
7 J4 v/ T0 C" r# s' |
}
$ c( D0 W9 g6 t9 }+ n; v1 P3 B
</script>
" V8 x4 r& J1 f0 ^
</html>

复制代码

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

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