在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>
2 O `- A5 b- n2 o% [
<html xmlns="http://www.w3.org/1999/xhtml">
# v$ Q9 H6 q# P! e3 w" i. e
<head>8 @) V2 L5 J0 {/ Y4 i
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>* {& I! m- W' e q0 [
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>+ Q. V7 C& R; c- ]
<title></title>
5 E' _! E: A! j( L" m' P9 u
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
* S9 W# } c3 L1 l5 p
<script>$ v% Y% L* K2 O9 n" H
var ws;; e6 H) ]; ]; j' b: l0 d
$().ready(function () {
1 {% V: w& P* |8 T7 ?$ o7 o G
$('#conn').click(function () {
. M" e5 Z- b. l6 q4 X) j
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
8 J( ]4 a V) {* M P4 f
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
) p/ O- ^" I ?9 c- p( s9 B" t; R/ P
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();6 F. t. k+ _) s3 Q: _4 |
//var host = "ws://192.168.85.128:8085/api/WSChat";
. @: G) e, i& c4 @$ ]
//webSocket = new WebSocket(host);& A0 O* E! e/ _( J2 Q+ C. B
$ K) [7 ]2 A2 `! R* A$ H
$('#msg').append('<p>正在连接</p>');
$ L/ w0 N4 ?8 D# D8 C% K
1 f* w9 p* P4 P" Z1 t, R8 g, h
ws.onopen = function () {
/ |) {3 d# M7 p" Y
$('#msg').append('<p>已经连接</p>');
m9 [4 v1 w: Q, V
}
9 s1 F# c0 m8 V) c. B `+ A6 O# o
ws.onmessage = function (evt) {
) f1 R a j6 P8 z3 ^" l
$('#msg').append('<p>' + evt.data + '</p>');+ z2 l" o& o2 M6 x
}. }6 j; v7 U" m9 x- Y. b5 y
ws.onerror = function (evt) {
2 E6 I9 D+ P. z. k( q0 v
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
' g. W1 E3 B" Q3 G
}
7 C6 w) w5 l" g+ }0 Z, r
ws.onclose = function () {( C& t$ K5 b% i* Z
$('#msg').append('<p>已经关闭</p>');
. B \0 j" z% R
}! K9 U' b/ ~8 T2 Y6 \- S
});4 P+ O B, C6 E$ Z6 i( M5 ^2 f
2 Z5 m# H& o3 I% J P+ o% D
$('#close').click(function () {
2 h! s; g8 N/ m4 B! y& n
ws.close();
, d/ R0 P9 d, w+ `
});
& S7 z! Z8 _( H" h m: d5 q7 r
0 p/ m. }! n. o( n N5 R0 N+ U: t
$('#send').click(function () {
/ R6 ?# o& \) T8 w( W
if (ws.readyState == WebSocket.OPEN) {& d9 A+ ?' C1 P7 h2 l$ [; l: M
ws.send($("#to").val() + "|" + $('#content').val());6 Y0 V! D. m4 d4 v. |+ Y1 B
}
' ?2 d1 x+ `4 Q6 q
else {, Z: J4 w$ d- ?# R+ E: B% Y
$('#tips').text('连接已经关闭');
0 R& n* Z/ }1 Q( z2 {9 T8 [
}
5 _# ?+ k/ z* s' Q
});
. X3 _' r' M3 U7 ~
o* X, x" ?2 H4 ]% m% H/ a
});- X2 k/ h( X2 ^9 ^ s$ H3 c2 l
</script>
8 E7 Z2 x1 |; r$ n- p- R1 S
</head>/ ~" q- K7 ~ L( b
<body>! P l9 n, A5 |% P1 s4 j
<div>
0 V3 W' q3 {& U f
<input id="user" type="text" />5 J* o) H( y4 T: \ u
<input id="conn" type="button" value="连接" />
) h3 s/ W9 l" d1 w% y9 {3 v. ]
<input id="close" type="button" value="关闭"/><br />% ^4 L# p! y9 v' E# C5 I
<span id="tips"></span>7 J/ y! \- {8 a3 v9 I
<input id="content" type="text" />
) G. K. a4 h6 C3 O% j1 V8 S: k _
<input id="send" type="button" value="发送"/><br /># z$ v# g \- I- y
<input id="to" type="text" />目的用户3 v! r+ ?& e( S$ k( [* K& A! k
<div id="msg"> s s* [; O3 J. \3 ]) [7 {; `) Y& z
</div>- R' ^6 x P5 ~
</div>
& W% r* ^' J) M( I) \) Y# I" s2 p
</body>8 C9 \4 f& B" O5 l
</html>

复制代码

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

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

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

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

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