在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>
! b1 `; K' ^7 B6 Z0 Z6 _9 P
<html xmlns="http://www.w3.org/1999/xhtml">
9 P1 C% \; o: i; ~* Q# e
<head>
. p" s S6 j5 t! d2 C
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>0 U i/ H! M6 j/ G7 e5 \& F9 K+ [
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>5 \. _. P5 s E& p% B! _3 E3 v
<title></title>
! c, P+ W4 b! m2 y% G4 X( ]0 p
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
7 U$ B9 P0 w: Q1 B" l
<script>4 _3 B) S# v/ F0 \+ T/ g+ N$ Z) i
var ws;6 I, ]% f' f5 T6 z7 @7 o$ C
$().ready(function () {
& _) I P& s; p- `7 m+ B
$('#conn').click(function () {
$ e/ R0 g" i% q6 N, k" m# Q( ?
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. P% r( t! Y3 M1 i. J' N! r
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
5 M$ x1 g3 B' }6 b4 f% x* t" H
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();4 o' a9 |! g& h' ]' v5 `/ [
//var host = "ws://192.168.85.128:8085/api/WSChat";
: c/ `3 \# s1 X# X' n: c/ d
//webSocket = new WebSocket(host);
& [; @! |" |4 c+ i- o
( b. R) z* }* J$ d0 a% g4 X
$('#msg').append('<p>正在连接</p>');; Z: i3 z/ H2 q" m
* Q5 G- \, ~- k, i0 e5 N
ws.onopen = function () {
# l. [6 E% K$ R5 F: A5 U7 Z3 r
$('#msg').append('<p>已经连接</p>');
& J- I' C6 K# {; p" G) l" Q% C
}
. a4 ~- Q8 @/ p& I
ws.onmessage = function (evt) {0 h7 ~- ^+ v) M6 w9 X, G) w
$('#msg').append('<p>' + evt.data + '</p>');
3 a; @1 D% J( B+ E+ v7 Y
}6 z6 E* P; b( L' \$ o
ws.onerror = function (evt) {! R4 Q2 d2 w; I; o: k3 l$ m S; E/ N
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');' x- R5 F: _- u9 Y% ?! Z
}1 @6 k4 u6 q x& U8 S/ h
ws.onclose = function () {
Y$ c' i/ Z. B6 O8 h" n& S7 B, L
$('#msg').append('<p>已经关闭</p>');* t* K# |- T* q5 N- x6 z
}0 L2 ]: J; M/ E" U' |# t
});# a% n/ I$ K& }1 u" J
( p6 p3 R, t; \& f" t) q
$('#close').click(function () {4 z9 L" ^8 U# H' U! j0 q
ws.close();
2 J1 a) Q& [$ c& U5 t( X E
});% D6 `- E" u* K3 d9 H
' s" c% c9 N2 U3 {
$('#send').click(function () {
# t1 E- E) {# h$ G$ {
if (ws.readyState == WebSocket.OPEN) {
: b( y! `+ K; Q4 K
ws.send($("#to").val() + "|" + $('#content').val());# E+ O2 h2 _, r
}& K3 Q9 [2 R3 i1 Y
else {
$ R2 N" l2 g* V2 n, S0 K6 g5 W% ^
$('#tips').text('连接已经关闭');, T o& N9 ?' `: y7 S5 ^. W
}: F4 Y3 E" s! M/ h! T
});
* @7 m3 v! T5 i9 C4 H5 t
% Z$ I: X; ?2 n+ z
});4 C8 @1 y0 i+ c7 \
</script>$ d% m. H* E6 o0 D; A& l4 z1 t' [
</head>
. W1 ~" j) A% W, j& ?- ~. Q
<body>
0 o9 [9 l8 B. W* }
<div>! ?- C3 R, w K; c3 [0 [
<input id="user" type="text" />
/ M. D; ~' X" x- V; w" K; D6 l
<input id="conn" type="button" value="连接" />
( J" _, D9 B7 }4 X3 Z6 V* p& K
<input id="close" type="button" value="关闭"/><br />
3 K- C; \5 A6 v6 E# G
<span id="tips"></span>
<input id="content" type="text" />
. h1 G) ?, ^$ P# \$ O' }4 L% I
<input id="send" type="button" value="发送"/><br />' _: A" P9 Y* x6 n- n# t5 e2 z
<input id="to" type="text" />目的用户
2 L2 K5 Z& N/ E' `) L' T
<div id="msg">
8 G( X: h" p- |
</div>9 D2 A( V4 z" X# v
</div>
5 u; [5 _9 D3 B5 G) M. L0 E
</body>
* Q8 l* k7 G" C5 d' A& [
</html>

复制代码

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

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

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

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

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

浏览过的版块