在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>4 @. p, s% Z0 J: O# ]
<html xmlns="http://www.w3.org/1999/xhtml">7 m: S) V6 B5 w" Z8 F$ K
<head>+ l7 [4 M* k2 M* ?$ l
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$ r# J! `2 {" p9 q0 F( }
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>& k1 p/ x3 \! N6 M& F+ G
<title></title>
8 K m# p7 b' c
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
; W: n- o0 A( p) p
<script>
- m6 B% e: G/ P! _4 i/ U; |1 R' Q: ]
var ws;
+ O* S4 D: H9 J8 J9 R
$().ready(function () {
( m, c* {" [( H& [; ^3 n' S
$('#conn').click(function () {3 |9 H g) b! B* n0 o
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());; Z, a% H4 P+ Z3 R- Q. F* c6 ?
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
. } t. |* p, j/ H" g# t* ]1 _, V" ]
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();7 X4 I$ r2 J; c
//var host = "ws://192.168.85.128:8085/api/WSChat";5 L: C# Y: ~; Z7 l% t
//webSocket = new WebSocket(host);
) e5 C! `# S/ W. s6 w0 e6 x1 W9 Q
3 Z* k7 E) d2 J" s
$('#msg').append('<p>正在连接</p>');
6 [1 J. J9 v. ^% h
4 G2 @2 ]! B: ^5 [% [2 d( r
ws.onopen = function () {1 q [: l: t9 a# M
$('#msg').append('<p>已经连接</p>');0 ~6 X4 @1 j$ K8 E
}. I+ S) f4 g- I9 |0 {
ws.onmessage = function (evt) {
% i% R" _1 q% y
$('#msg').append('<p>' + evt.data + '</p>');
! L2 Y, z& I2 y8 Q; F0 l1 u: ~0 R
}
8 [1 D' R0 ]) d: x+ [
ws.onerror = function (evt) {
1 T' d& K, _0 u
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');2 A8 N- v3 Y$ @/ w) v8 u
}2 R9 P# J* z) F3 x3 h9 _% o
ws.onclose = function () {
, W! p& K% s/ X+ N/ G
$('#msg').append('<p>已经关闭</p>');
' R0 o0 A0 M* X
}. H& I5 W' [& ~% @, i/ q$ \
});
' M6 @' F& b( D f5 n: k% Q
9 Z5 I3 J, V5 C4 z C# Z( U
$('#close').click(function () {8 q, f7 `4 s- y1 w; Q" H0 o
ws.close();' ?5 \ T. ^" d, e z
});
* N) p: L) B- L- Z! G' E
) y/ J( M y# a1 d
$('#send').click(function () {' t% t2 b) Q1 u3 c. f
if (ws.readyState == WebSocket.OPEN) {
7 ` O) G# w$ x# P1 W
ws.send($("#to").val() + "|" + $('#content').val());& C: |8 |* M( x+ E- k
}$ Q# |8 f( Y: K
else {
2 v3 n/ ~$ R* a: u2 @+ ], [. _
$('#tips').text('连接已经关闭');) |' Z/ \2 L4 V. H7 ?
}9 E( Z! t7 Z& b* Z# ?% U- t
});
' a* z! M3 L2 p7 g
& L! X- D, C) u) \
});
G/ z, ~0 ~- e. P9 Q5 t* @
</script>
' E0 H& q5 s& i. f7 M
</head>
$ r! H5 I$ E, s9 J( F
<body>
6 Q0 p! S0 S! q6 M
<div>5 u- q% D9 T0 l G' D2 w9 V* d
<input id="user" type="text" />
* B5 k4 l2 k* o# V1 t( b! z D
<input id="conn" type="button" value="连接" />
. k# @! G7 T& o: E6 ?$ X6 _! v# s
<input id="close" type="button" value="关闭"/><br />
- J$ l" ~3 U B2 w
<span id="tips"></span>
, L- D' [2 g8 `' D; s3 [
<input id="content" type="text" />
2 i8 Z F. w; L3 z* k2 }4 @- ~# s: E
<input id="send" type="button" value="发送"/><br />
- y7 J" Y/ e) f( {
<input id="to" type="text" />目的用户( `7 e5 Z: \$ H# N
<div id="msg">
8 \6 A$ }* x# b$ S9 D9 b
</div>$ Z5 ?) ~# h9 n; ?
</div> X+ C0 v, g& Y- F
</body>, o( j+ M- ?1 V: R
</html>

复制代码

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

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

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

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

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