在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>$ i2 c5 W6 ]* I* H) A
<html xmlns="http://www.w3.org/1999/xhtml">) u1 u$ p* W) N. b# s' M5 J
<head>" @" a, }) S% z% y
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
& F4 U; t0 i* b' U
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
: R* w, ~" g/ V$ O8 c
<title></title>* H# f- i) ^4 K2 g1 _$ X2 Z
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
0 j* w1 }6 R8 T8 o9 V: l
<script>
3 e* H E# y# n$ a
var ws;+ ^# U5 O) X5 E0 d* J, U2 x0 A: V
$().ready(function () {: X% L8 Y& m l& t- L
$('#conn').click(function () {
5 b- L+ v0 g: E" s9 u
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());& v6 [# K( P- D0 q4 K3 b j
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());) Q; |+ a* W' k) ~* d$ \
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
% N# {, e7 Z8 s1 `
//var host = "ws://192.168.85.128:8085/api/WSChat";& \7 R' ]. s5 l. k5 d1 e8 r
//webSocket = new WebSocket(host);, Y3 |% O6 j I$ Y' E
! b c$ \# K4 Y/ x
$('#msg').append('<p>正在连接</p>'); T, n$ U" _7 k' {; W
4 K( B6 e6 l; j) f
ws.onopen = function () {0 ~% l) P8 ]. V3 L2 V
$('#msg').append('<p>已经连接</p>');" T; T9 W2 L' p: J& F; J6 J: ]
}2 }; _7 ~1 t+ n% ]2 G" W
ws.onmessage = function (evt) {7 y3 s$ U5 T; D* j' W1 {
$('#msg').append('<p>' + evt.data + '</p>');
" q0 s. b* k" k% f( o
}
6 W6 [1 C6 Q' m2 q& m. \
ws.onerror = function (evt) {
0 }# d0 J) M& X2 c
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');/ S. B+ I0 I7 m7 z$ v. y
}' h( j* k3 m _& J2 q+ h. R' D4 \
ws.onclose = function () {: R6 C; s3 c2 l7 X/ a; C
$('#msg').append('<p>已经关闭</p>');% k( K$ k X. ]# u: B) W
}/ _2 v. N- f# p# b& U9 \
});
- @) [% S) g0 ^: b
* {5 x/ j' h1 e- N, E
$('#close').click(function () {4 h6 o" {% T' c2 Z. }
ws.close();
% `7 {/ V; A; z' H2 w5 E
});7 r: y. w% y& C, t" a; V
+ `& L1 t$ o2 E [
$('#send').click(function () {. d2 \& `1 @3 H( q
if (ws.readyState == WebSocket.OPEN) {
' Z) @6 J; y( i6 a
ws.send($("#to").val() + "|" + $('#content').val());
+ E; |- [$ |" j# P0 n9 U
}6 r$ n- W# i& z j" O" [
else {
" H2 N$ _* u5 n2 f
$('#tips').text('连接已经关闭');* s/ d A+ m4 Z! p" G( i% Q! p
}3 O+ t+ O2 v; p# {
});! g" o1 ^8 T- [9 j* E# x9 Q4 V1 m
, Y7 U( r1 U+ U: v# @9 b7 W3 J
});9 K9 n& x6 ]5 @" C8 z
</script>
# n0 p8 a0 H5 M8 j( C; T* z* N! _
</head>
, O0 F& J. c, O# b
<body>; f, r8 \' ?9 n( q
<div>0 P9 H2 g" h2 v* G! n; P: @
<input id="user" type="text" />
) q6 ]3 D( b) r. J
<input id="conn" type="button" value="连接" />0 m c9 H/ G3 p# v
<input id="close" type="button" value="关闭"/><br />
5 [" k8 z4 z9 [1 f$ b/ M) Z
<span id="tips"></span>
8 r* G1 ]3 O1 i5 X) a
<input id="content" type="text" />2 l+ F0 B& b: f7 P
<input id="send" type="button" value="发送"/><br />
! _$ v& i, i1 _! j: K
<input id="to" type="text" />目的用户
1 L# l3 Q/ e" q3 a2 P
<div id="msg">
% H h5 \2 M( ^6 C! y/ y
</div>
3 Q+ L [. Z5 W/ U" c3 Y4 m8 x* S
</div>
; H" q3 r/ b; M$ ?/ X( v. W2 j
</body>/ p" n. C0 W6 m. ~5 V9 z5 M
</html>

复制代码

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

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

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

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

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