在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>% r n3 c/ E" W8 m4 [1 L8 E& w
<html xmlns="http://www.w3.org/1999/xhtml">
3 ~6 d4 ~& k5 m n9 I' o
<head>0 x, C/ f2 [1 |9 X
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ w, R5 {9 U9 h: l6 h/ n+ @) G
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
6 u5 }2 S6 ?9 e' A/ K
<title></title>2 I+ [& j# Q/ u, Y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
! N9 H |8 H) \" l) g
<script>6 v2 z- d# ^8 c
var ws;
) H2 k" ~, |) L; Y
$().ready(function () {' f1 W" W8 @5 _% F }
$('#conn').click(function () {
' Y! G* X) G w* @* t/ q
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
# j( D& z+ ]8 t
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 a4 Q' w, |2 }* j U B0 T
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();& c; n0 G" o- ^4 v2 R7 V' y
//var host = "ws://192.168.85.128:8085/api/WSChat";# W/ g- a& i& W* ]# D/ F% f d
//webSocket = new WebSocket(host);4 K8 s6 q1 d9 J" h% e Z7 E
5 ?7 w1 [3 W& G! {- g* _/ p: \
$('#msg').append('<p>正在连接</p>');
& C2 J+ K4 i# \, V* D, [
T5 a7 r" M1 m: d8 G t' N
ws.onopen = function () {
9 R- |7 |0 p$ S8 |
$('#msg').append('<p>已经连接</p>');
% O/ j# Y0 b; O! N' E- g4 C7 y7 q
}5 l" ~/ ~" L, ~ J6 k2 M! Q
ws.onmessage = function (evt) {
7 {3 \! c/ L+ k/ w4 y7 Y
$('#msg').append('<p>' + evt.data + '</p>');) q' J! _4 N! J$ x
}) e/ `6 @/ D0 v6 ^( o
ws.onerror = function (evt) {) Q4 l1 H- J1 A8 Q
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
2 _( P7 D4 F- `! y' _
}
& T3 }. x7 E( W5 \$ a: f& l
ws.onclose = function () {5 u1 ]1 K5 K1 ^6 F5 A
$('#msg').append('<p>已经关闭</p>');
7 W" g# L% @7 C3 Q1 h: @6 G1 w
}# R: n, O4 X( X: |# J% `4 J# ]3 A
});* f/ I" P# J$ h& e" l) Q1 e
. O$ H% X" y( w2 \) A# e( Y# H7 E$ B
$('#close').click(function () {
* ` ~/ \5 T$ _9 [8 |8 s* d$ ~
ws.close();$ d8 r9 u& w* C3 z, g3 Y7 e
});
" |- [/ X* N( q! ]7 {7 I$ E
7 J) k6 ^) ?7 L) Z( H3 X
$('#send').click(function () {
$ t( [6 D$ Q' }9 z3 N
if (ws.readyState == WebSocket.OPEN) {
8 }7 X1 Q% E$ n) ?
ws.send($("#to").val() + "|" + $('#content').val());1 q1 Y- F/ a5 A) K t" T
}
4 J9 p7 T( i3 A& z- `. ]% m
else {! F( Q6 q* C0 ~+ \1 W% d. `) s
$('#tips').text('连接已经关闭');
, i9 T- V( U) p/ B: K c
}( M; @- F4 v" N, E! Z% S
});
9 W: C, v7 k# p# ~& d4 O; D
6 q+ {+ q3 r- Q2 b+ N% N
});. D* [6 J- l9 H
</script>; ^+ ]( U) d/ j/ ?
</head>
7 C8 a" G, u7 K7 g8 H: @( Q
<body>
. l$ D& _' v' _% |# @" \
<div>: P# L/ y2 t) I* z0 C9 W9 y
<input id="user" type="text" />
# ]& _$ ]. q" Z5 k/ k5 d
<input id="conn" type="button" value="连接" />2 L, f* M: e& c- N$ Q
<input id="close" type="button" value="关闭"/><br />
) U+ v3 m7 Y+ L9 j, W4 N
<span id="tips"></span>) i5 L3 ^' u3 g! m/ o( z9 {% H
<input id="content" type="text" />
& T' |7 b+ N) o
<input id="send" type="button" value="发送"/><br /> u# D9 p! ?& K. q% E
<input id="to" type="text" />目的用户
4 U4 q' j" h* A! [# n# [7 D
<div id="msg">6 W5 M. V* ^8 M: A/ i, d, P
</div>
/ l8 v$ _ {* V! q5 G) U7 [5 B
</div>( r) S9 s" R. K. @1 l3 J1 g
</body>4 j5 r5 H7 p* _6 u' Z9 T j3 {5 @
</html>

复制代码

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

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

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

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

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