在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html># Q/ |' g1 w) e+ W6 D
<html xmlns="http://www.w3.org/1999/xhtml">% a$ F+ Q' I4 x8 A# _) k7 I% V
<head>
. \' i5 P" z4 P& ]' R$ g
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>5 ~( |# }* J# M
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> c, k7 a" h9 X$ i! |2 u, q. M
<title></title>
: E7 U1 \. K! J" [/ X
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>& X. b. b) \8 L& W6 u
<script>
# ]0 Z. t- p+ h+ b$ N) q- N2 B. C
var ws;0 R' f7 d) a* ^& r" f, u" L6 }
$().ready(function () {
# w" T3 [; S- {6 e# o9 N6 s: f
$('#conn').click(function () {1 ?& s1 h/ G. i0 `4 ^
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
6 L: o+ o; Z7 y8 c, _
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());; e. ~) q6 Z: {& x
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();; W: C* w. }' w" |
//var host = "ws://192.168.85.128:8085/api/WSChat"; r$ e' F& j! A) i
//webSocket = new WebSocket(host);
& U3 F- R" U2 l6 G4 A
" U0 Z: C. m O- \% A
$('#msg').append('<p>正在连接</p>');% `* S: Y1 K3 M8 r W/ D [
' t) g- g+ H4 y; e, i5 I+ L: n
ws.onopen = function () {! q7 ~6 \1 Y9 \ A- B1 [
$('#msg').append('<p>已经连接</p>');& }' q/ M5 q- e. m
}
$ A6 u9 g' V& S. e# r8 O
ws.onmessage = function (evt) {
3 X6 Q% `5 }* P7 f$ z
$('#msg').append('<p>' + evt.data + '</p>');
9 Q: x; ]0 @' o) X
}9 s- l1 b8 x2 }" [ f3 ~1 k8 x
ws.onerror = function (evt) {: [, O& F9 j- S0 K
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
# I, g _' X8 v- [& k& F [- t
}
1 O0 V- p/ G' ]2 C1 ^* j
ws.onclose = function () {
2 Y! o* g) o0 Y/ z$ n* u' e; N. ]
$('#msg').append('<p>已经关闭</p>');
" J; _$ C+ X; j* b" i4 h
}9 A8 z, P3 N1 b8 I) }3 ?' M! T
});
. ? y! o! s1 i
- ?6 ^8 L8 ]7 K* D+ e
$('#close').click(function () {3 B/ a; v: r$ w! ~. Z
ws.close();) D0 U5 g0 f6 O+ d; h! ^
});
' @' D1 D6 L* v% u
- W, z9 j% b2 B1 t, l
$('#send').click(function () {9 w$ m. ^$ [2 }, C# |) L _9 }
if (ws.readyState == WebSocket.OPEN) {
1 P/ f# i7 f0 J) A/ F* w7 G
ws.send($("#to").val() + "|" + $('#content').val());
8 B" I3 `% F0 P
}
1 p, d4 V _* T- s* v7 A/ |, g) A
else {4 b! i; H$ l, g& F- G* P: Y
$('#tips').text('连接已经关闭');" J* R% b) X. r W; d7 Y
}/ G @) v* R1 u6 h- {
});4 p2 ^6 [5 L+ L, m+ U
) X1 t8 D7 ?( J+ Y# o
});
) g8 Y4 O. e u, N1 j& ^
</script>
5 T: H }- d1 g, P& K8 Y4 n+ i
</head>% R: f* s# [5 |( {4 a
<body>+ L- I1 O6 ?: E: A& N9 I
<div>" }5 q" t# U' j" d; _5 Z) l \
<input id="user" type="text" />
. n3 f9 p4 T7 \
<input id="conn" type="button" value="连接" />
) j" G) v1 j, H1 p$ `( `
<input id="close" type="button" value="关闭"/><br />6 R8 D1 v0 T, u2 b6 {2 `+ v) f' w( ~
<span id="tips"></span>
) Q% z( p! }/ p- }, l- B
<input id="content" type="text" />
! {5 c+ ~9 u& ^/ T7 |
<input id="send" type="button" value="发送"/><br />- b8 q; N" Y% A( ?& ?3 A& H
<input id="to" type="text" />目的用户) p& }3 @" q) `( q& b) l9 k/ P y
<div id="msg">
+ _1 f# m6 {6 g2 W. ~: I; N$ }
</div>
g7 Y+ R6 {" u4 O9 v. R# M
</div>
6 D4 _8 t) ` Q
</body>$ m% \( }/ p3 H4 D8 g! a
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

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

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块