Heim > Web-Frontend > js-Tutorial > Hauptteil

Ein kleines Beispiel für WebSocket, implementiert in HTML5 (mit Code)

不言
Freigeben: 2018-08-16 14:33:00
Original
4482 Leute haben es durchsucht

Dieser Artikel zeigt Ihnen ein kleines Beispiel (mit Code), das in HTML5 implementiert ist. Freunde in Not können darauf verweisen.

Client-Code:

<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(&#39;连接成功&#39;);
};
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>
Nach dem Login kopieren

Winform-Servercode:

Hinweis: Das Fleck-Paket

muss zuerst eingeführt werden
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));
};
});
}
}
}
Nach dem Login kopieren

Verwandte Empfehlungen:

PHP+HTML5-Methode zur Implementierung eines Chatrooms basierend auf WebSocket, HTML5WebSocket

Verwenden Sie die HTML5-WebSocket-Implementierung des WebSocket-Chatrooms_HTML5-Tutorial-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEin kleines Beispiel für WebSocket, implementiert in HTML5 (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage