在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>% ?( v: d9 c- f& b
<html xmlns="http://www.w3.org/1999/xhtml">
# c. i, p$ @& |# q: ?- _
<head>
7 P# J$ X6 s( P3 |# A: [
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
3 M }9 Q- B% \; ^
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
$ c% g6 \" z9 g' } i: s
<title></title>
% b2 z8 r% A1 E' B- F) S5 v
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>2 H+ i$ ^" h7 S8 }/ O8 L- s
<script>8 b* y2 O% d# Y2 {& w& b
var ws;
7 u. |) }5 ~- |& U& N+ p- O& c
$().ready(function () {+ q U. S: h' r1 }) k+ V
$('#conn').click(function () {$ h! X$ S9 ^3 K p+ \+ k' s
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());! {& A, p P, H2 R, @( a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 \% M# i- |2 X, y, p+ S. [ U
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();2 W$ F; J d$ V
//var host = "ws://192.168.85.128:8085/api/WSChat";
1 I/ ?: ?$ f) D1 r
//webSocket = new WebSocket(host);
) v# T A+ X6 Y1 Q+ E$ s
3 g. p- l9 `& Y& j& Z g2 M
$('#msg').append('<p>正在连接</p>');2 w+ m- K. P: i0 o# w# y
# J# Z) |; T) |4 Q! F; f+ p" S
ws.onopen = function () {
4 H* `. ?! S" w, H/ _
$('#msg').append('<p>已经连接</p>');* Y h' N! ~) y0 i( N
}! P/ L9 P. r& Z8 l$ V
ws.onmessage = function (evt) {1 {3 z8 _" Q9 i% N3 N
$('#msg').append('<p>' + evt.data + '</p>');0 V. f# _! X6 O
}2 Z5 m7 d- x' s
ws.onerror = function (evt) {
! x$ D$ M# t# Q- a P# y$ _. v
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');2 H7 j0 O1 i: ~6 X5 {7 U
}5 ]) R+ i& k {# G7 m
ws.onclose = function () {) g% c2 r. [6 T
$('#msg').append('<p>已经关闭</p>');
! k9 Y) {; n* C6 H( _( ~
}% q# @) ^# I; |7 T
});
5 x4 f" l E: l( K y' J! Q1 t. L
4 L: o! e) B. R% c
$('#close').click(function () {
; Y3 G- M# ], p& T; Z; l
ws.close();
2 N4 T" q4 K2 A2 ?
});
( @, ?6 \9 u/ Q8 E
" f8 O0 u- n3 p/ C. N1 q& k) Y1 Y
$('#send').click(function () {0 k) t0 R6 w: V' d
if (ws.readyState == WebSocket.OPEN) {
6 H) I' ?3 G/ g) |: E
ws.send($("#to").val() + "|" + $('#content').val());
; @# |. T* i/ k* j6 ~ {% J
}3 G. P X% m7 u$ e
else {: d. P: f! ]0 n4 d$ \
$('#tips').text('连接已经关闭');
3 ^2 x+ A1 t. h) h0 h
}" o; a% @( I: S h2 o
});. K, V! I- j3 _5 O! U
( c8 w' Z& k9 {5 x9 O) h
});" v, Q& z9 O' }, o6 P8 n* `/ t
</script>
# R G7 q' b; Y) n. @
</head>
% V( A& I/ P8 } Y. X
<body>
" L9 i/ ] B0 S, r+ C4 y
<div>: i% r* u5 Y, _" G$ I0 Q1 f
<input id="user" type="text" />
5 C4 ~- _- B+ X4 F
<input id="conn" type="button" value="连接" />
- ~4 A/ J0 L( M5 `2 U
<input id="close" type="button" value="关闭"/><br />
( Y; P! I' `$ r+ A
<span id="tips"></span>; a# y; h- A, g/ `6 p
<input id="content" type="text" />
& ]; [ E* G" L5 C% r" k. H
<input id="send" type="button" value="发送"/><br />. h# H( t! P* V, B9 }# D" B, Y8 q
<input id="to" type="text" />目的用户
. [! t/ |: S4 X5 s
<div id="msg">
6 D9 n/ T% ?0 {! ^2 T% b9 v
</div>
2 C+ W" K* Z& f( n6 e/ ~) }
</div>
9 Q& C5 d2 V: I i
</body>; H' P1 u: w: @7 b a6 z8 Q: p- W# J4 z! z
</html>

复制代码

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

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

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

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

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