在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>9 ^* D) o& Q! j# @9 Y
<html xmlns="http://www.w3.org/1999/xhtml">
' F) C& F: ^+ }9 A6 k
<head>* d1 p+ f5 n* F ~) e( L0 {; r$ ]$ \ q' U
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>! K5 k: ^/ }5 J+ y0 b" Q! a5 M
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>2 \- B1 Q% x* R* D
<title></title>
! e3 |* l% E* a+ F5 X" G# J- b+ ^( }2 x
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
4 p3 M# y5 `. q. H( _3 _/ m
<script>8 Y6 g ?% ]; Q m" t+ {
var ws;
7 p7 H r3 h0 D
$().ready(function () {
" }2 _& x/ F/ O6 w4 l7 D: b2 a
$('#conn').click(function () {& g) h6 q$ i' a& K4 w8 w
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
% n3 L5 r: n d8 ?
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
. H3 u- _4 b+ a6 g3 d
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
) ^( Q q' G# j# v& O3 R' U
//var host = "ws://192.168.85.128:8085/api/WSChat";! y! P: a7 f# r9 L! A4 E; N, E2 E
//webSocket = new WebSocket(host);
. `/ ~: `3 c7 P& ~" |" y
3 E9 c9 E9 l' g7 t; L+ G
$('#msg').append('<p>正在连接</p>');
+ {. z( W$ Z _8 m" e7 Q8 \6 u
# N1 S2 _" y4 U3 l8 n
ws.onopen = function () {
" c( d% }+ N. M+ R
$('#msg').append('<p>已经连接</p>');
: c- {* Q5 {* d+ e9 _& u! d; N- H
}
3 V! m& t# f5 |, h- t2 w4 u4 |3 X
ws.onmessage = function (evt) {
* v; @$ S* A2 |. p( n+ I1 k
$('#msg').append('<p>' + evt.data + '</p>');; S6 W' j9 I* F( O
}
8 D$ l* `: E G" @6 w5 j& T/ t8 r
ws.onerror = function (evt) {
+ s$ ~- M2 H3 o! x4 i
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>'); z5 Z4 a7 G5 U5 O9 C; H7 C
}. ?3 C, g7 c; S7 {4 J" T4 e
ws.onclose = function () {
, Q2 {+ Y0 D$ w, c; l
$('#msg').append('<p>已经关闭</p>');
" T; n! ~0 f: A) S* f) }
} v# |8 V ]! E/ r( M! H2 _- v
});2 @! e0 k; |7 n- S- S F
f' P) Y$ e2 h1 r0 E8 A
$('#close').click(function () {
% e, A7 `2 b" V9 u8 }
ws.close();
1 F. ~9 ?& w, n- e0 }2 {4 M) ^; A
});. H2 f+ l) V. V4 A4 U& I
4 @$ G( k9 p# f7 `! u
$('#send').click(function () {
$ h& R5 I( o$ u/ _) E% g$ q
if (ws.readyState == WebSocket.OPEN) {9 O: O3 M/ F, @' J2 y5 x" I0 E8 S
ws.send($("#to").val() + "|" + $('#content').val());
7 u2 @8 s5 Z! l4 n( A% A# u1 L
}: L) Q" s8 u. h" s
else {; Y2 l }- u$ G! r
$('#tips').text('连接已经关闭');3 C1 s: W/ v( h/ V( y
}
) N! m J8 {9 G3 s- h! x
});
D! c6 z* q4 c/ |2 g
; u3 q' ]: Z1 m. z2 e/ A; N
});/ O3 v2 g& _ a N$ B% y
</script>
" _- s0 Y2 u& o; l/ `4 i
</head>. ?! R% F+ W! t6 }) K
<body>
5 K/ ~% L1 M" H m
<div>' ~# F; p8 ^! C6 |. v* r
<input id="user" type="text" />- z5 @. _' T$ Y1 u9 _+ n) V
<input id="conn" type="button" value="连接" />
2 N4 `" m! ? h) ~, B; Q
<input id="close" type="button" value="关闭"/><br />8 c7 c$ \6 Y: e5 e% h& T
<span id="tips"></span>
/ f/ |/ ]( s9 t3 u
<input id="content" type="text" />" D, A9 O( y$ w9 C/ c
<input id="send" type="button" value="发送"/><br />
0 T# t0 G. s+ B; L0 J$ p
<input id="to" type="text" />目的用户+ k& w6 B( v% M2 U6 ^" A3 }
<div id="msg">& h' Z; L1 |+ E/ N# {
</div>& C/ w8 }7 G8 o& W
</div>
2 I+ `: s+ E, [ f# v
</body>9 n% M$ P0 T; E6 Q
</html>

复制代码

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

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

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

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

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