ホームページ > 記事 > ウェブフロントエンド > html5 で実装された WebSocket の小さな例 (コード付き)
この記事では、HTML5 で実装された WebSocket の小さな例 (コード付き) を紹介します。必要な方は参考にしていただければ幸いです。
クライアント コード:
<html> <head> <script> var socket; if ("WebSocket" in window) { var ws = new WebSocket("ws://127.0.0.1:8181"); socket = ws; ws.onopen = function() { console.log('连接成功'); }; ws.onmessage = function(evt) { var received_msg = evt.data; document.getElementById("showMes").value+=evt.data+"\n"; }; ws.onclose = function() { alert("断开了连接"); }; } else { alert("浏览器不支持WebSocket"); } function sendMes(){ var message=document.getElementById("name").value+":"+document.getElementById("mes").value; socket.send(message); } </script> </head> <body> <textarea rows="3" cols="30" id="showMes" style="width:300px;height:500px;"></textarea> <br/> <label>名称</label> <input type="text" id="name"/> <br/> <label>消息</label> <input type="text" id="mes"/> <button onclick="sendMes();">发送</button> </body> </html>
winform サーバー コード:
注: 最初に Fleck パッケージを導入する必要があります
using System; using System.Collections.Generic; using System.Linq; using System.Windows.Forms; using Fleck; namespace socketService { public partial class Form1 : Form { public Form1() { InitializeComponent(); CheckForIllegalCrossThreadCalls = false; } private void Form1_Load(object sender, EventArgs e) { //保存所有连接 var allSockets = new List<IWebSocketConnection>(); //初始化服务端 var server = new WebSocketServer("ws://0.0.0.0:8181"); //开始监听 server.Start(socket => { //有客户端连接触发 socket.OnOpen = () => { textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 连接 \r\n"; allSockets.Add(socket); }; //有客户端断开触发 socket.OnClose = () => { textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 断开连接 \r\n"; allSockets.Remove(socket); }; //接收客户端发送的消息 socket.OnMessage = message => { textBox3.Text += socket.ConnectionInfo.ClientIpAddress + " 发送了消息:" + message + "\r\n"; //发送接收到的消息给所有客户端 allSockets.ToList().ForEach(s => s.Send(message)); }; }); } } }
関連推奨事項: WebSocket に基づいてチャット ルームを実装する
html5 websocket を使用して websocket チャット ルームを実装する_html5 チュートリアル スキル
以上がhtml5 で実装された WebSocket の小さな例 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。